Please refer to the errata for this document, which may include some normative corrections.
This document is also available in these non-normative formats: a single-page version, a zip archive of HTML (without external dependencies), and a PDF. Дивіться also translations, noting that the English version of this specification is the only normative version.
Copyright © 2011 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark and document use rules apply.
This specification defines the features and syntax for Scalable Vector Graphics (SVG) Version 1.1, a modularized language for describing two-dimensional vector and mixed vector/raster graphics in XML.
This section описує the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.
This document is the 16 August 2011 SVG 1.1 Second Edition Recommendation. Second Edition incorporates a number of corrections that were published as errata against the First Edition, as well as numerous other changes that help make the specification more readable and unambiguous. Changes appendix lists all of the changes that were made since the first Proposed Recommendation publication of the Second Edition. For all changes made between the First Edition and the Second Edition, see:
Comments on this Recommendation are welcome. Corrections against the
specification will be published as errata, and subsequently will be
incorporated into future editions of SVG 1.1 or into SVG 2.0. Comments can
be sent to www-svg@w3.org,
the public email list for issues related to vector graphics on the Web.
This list is archived
and senders must agree to have their message publicly archived from their
first posting. To subscribe send an email to www-svg-request@w3.org
with the word subscribe in the subject line.
W3C SVG Working Group has released an expanded test suite for SVG 1.1 along with an implementation report. This test suite will continue to be updated with new tests to improve interoperability even after Recommendation phase.
This document has been produced by the W3C SVG Working Group as part of the Graphics Activity within the W3C Interaction Domain. goals of the W3C SVG Working Group are discussed in the W3C SVG Charter. W3C SVG Working Group maintains a public Web page, http://www.w3.org/Graphics/SVG/, that contains further background information. authors of this document are the SVG Working Group participants.
This document has been reviewed by W3C Members, by software developers, and by other W3C groups and interested parties, and is endorsed by the Director as a W3C Recommendation. It is a stable document and may бути використано as reference material or cited from another document. W3C's role in making the Recommendation is to draw attention to the specification and to promote its widespread deployment. This enhances the functionality and interoperability of the Web.
This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.
English version of this specification is the only normative version. Однак, for translations in other languages see http://www.w3.org/Graphics/SVG/svg-updates/translations.html.
SVG Working Group would like to thank the following people for contributing to this specification by raising issues that resulted in errata that were folded in to this document: Tavmjong Bah, Brian Birtles, Tolga Capin, Alex Danilo, Thomas DeWeese, Alexey Feldgendler, Vincent Hardy, Ian Hickson, Olaf Hoffmann, Daniel Holbert, Oliver Hunt, Anne van Kesteren, Takeshi Kurosawa, Paul Libbrecht, Robert Longson, Helder Magalhães, Robert O’Callahan, Olli Pettay, Antoine Quint, Kalle Raita, Tim Rowley, Peter Sorotokin, Henry S. Thompson, Jasper van de Gronde, Mohamed Zergaoui, Boris Zbarsky.
In addition, the SVG Working Group would like to acknowledge the contributions of the editors and authors of SVG 1.0 and SVG 1.1 (First Edition), as much of the text in this document derives from these earlier versions of the SVG specification.
Finally, the SVG Working Group would like to acknowledge the great many people outside of the SVG Working Group who help with the process of developing the SVG specifications. These people are too numerous to list individually. They include but are not limited to the early implementers of the SVG 1.0 and 1.1 languages (including viewers, authoring tools, and server-side transcoders), developers of SVG content, people who have contributed on the www-svg@w3.org and svg-developers@yahoogroups.com email lists, other Working Groups at the W3C, and the W3C Team. SVG 1.1 is truly a cooperative effort between the SVG Working Group, the rest of the W3C, and the public and benefits greatly from the pioneering work of early implementers and content developers, feedback from the public, and help from the W3C team.
This specification defines the features and syntax for Scalable Vector Graphics (SVG).
SVG is a language for describing two-dimensional graphics in XML [XML10]. SVG allows for three types of graphic objects: vector graphic shapes (тобто, paths consisting of straight lines and curves), images and text. Graphical objects can be grouped, styled, transformed and composited into previously rendered objects. feature set includes nested transformations, clipping paths, alpha masks, filter effects and template objects.
SVG drawings can be interactive and dynamic. Animations can be defined and triggered either declaratively (тобто, by embedding SVG animation elements in SVG content) or via scripting.
Sophisticated applications of SVG are possible by use of a supplemental scripting language which accesses SVG Document Object Model (DOM), which provides complete access to all elements, attributes and properties. A rich set of event handlers such as ‘onmouseover’ and ‘onclick’ can be assigned to any SVG graphical object. Because of its compatibility and leveraging of other Web standards, features like scripting can be done on XHTML and SVG elements simultaneously within the same Web page.
SVG is a language for rich graphical content. For accessibility reasons, if there is an original source document containing higher-level structure and semantics, it is recommended that the higher-level information be made available somehow, either by making the original source document available, or making an alternative version available in an alternative format which conveys the higher-level information, or by using SVG's facilities to include the higher-level information within the SVG content. For suggested techniques in achieving greater accessibility, see Accessibility.
SVG 1.1 is a modularization of SVG 1.0 [SVG10]. Дивіться the Document Type Definition appendix for details on how the DTD is structured to allow profiling and composition with other XML languages.
MIME type for SVG is "image/svg+xml" (дивіться XML Media Types [RFC3023]). registration of this MIME type is in progress at the W3C.
It is recommended that SVG files have the extension ".svg"
(all lowercase) on all platforms. It is recommended that gzip-compressed
[RFC1952] SVG files have the extension ".svgz"
(all lowercase) on all platforms.
It is recommended that SVG files stored on Macintosh HFS file systems
be given a file type of "svg " (all lowercase, with a
space character as the fourth letter). It is recommended that
gzip-compressed SVG files stored on Macintosh HFS file systems be given
a file type of "svgz" (all lowercase).
following are the SVG 1.1 namespace, public identifier and system identifier:
following is an example document type declaration for документ SVG:
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
Note that DTD listed in the System Identifier is a modularized DTD (i.e. its contents are spread over multiple files), which means that a validator may have to fetch the multiple modules in order to validate. For that reason, there is a single flattened DTD available that corresponds to the SVG 1.1 modularized DTD. It can be found at http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat.dtd.
While a DTD is provided in this specification, the use of DTDs for validating XML documents is known to be problematic. In particular, DTDs do not handle namespaces gracefully. It is not recommended that a DOCTYPE declaration be included in SVG documents.
SVG leverages and integrates with other W3C specifications and standards efforts. By leveraging and conforming to other standards, SVG becomes more powerful and makes it easier for users to learn how to incorporate SVG into their Web sites.
following описує some of the ways in which SVG maintains compatibility with, leverages and integrates with other W3C efforts:
In environments which support DOM 2 Core [DOM2] for other XML grammars (тобто, XHTML [XHTML]) and which also support SVG and the SVG DOM, a single scripting approach can бути використано simultaneously for both XML documents and SVG graphics, in which case interactive and dynamic effects will be possible on multiple XML namespaces using the same set of scripts.
Within this specification, the key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" are to be interpreted as described in Key words for use in RFCs to Indicate Requirement Levels [RFC2119]. Однак, for readability, these words do not appear in all uppercase letters in this specification.
At times, this specification recommends good practice for authors and користувацькі агенти. These recommendations are not normative and conformance with this specification does not depend on their realization. These recommendations contain the expression "We recommend ...", "This specification recommends ...", or some similar wording.
rootmost ‘svg’ element is the furthest ‘svg’ ancestor element that does not exit an SVG context. Дивіться also фрагменту документу SVG.
An SVG context is a фрагмент документу where all elements within the fragment must be subject to processing by an SVG користувацький агент according to the rules in this specification.
Якщо SVG content is embedded inline within parent XML (such as XHTML), the SVG context does not include the ancestors above the rootmost ‘svg’ element. Якщо the SVG content contains any ‘foreignObject’ elements which in turn contain non-SVG content, the SVG context does not include the contents of the ‘foreignObject’ elements.
general definition of a користувацький агент is an application that retrieves and renders Web content, including text, graphics, sounds, video, images, and other content types. A користувацький агент may require additional користувацькі агенти that handle some types of content. For instance, a browser may run a separate program or plug-in to render sound or video. користувацькі агенти include graphical desktop browsers, multimedia players, text browsers, voice browsers, and assistive technologies such as screen readers, screen magnifiers, speech synthesizers, onscreen keyboards, and voice input software.
A "користувацький агент" may or may not have the ability to retrieve and render SVG content; however, an "SVG користувацький агент" retrieves and renders SVG content.
SVG stands for Scalable Vector Graphics, an XML grammar for stylable graphics, usable as an XML namespace.
To be scalable means to increase or decrease uniformly. In terms of graphics, scalable means not being limited to a single, fixed, pixel size. On the Web, scalable means that a particular technology can grow to a large number of files, a large number of users, a wide variety of applications. SVG, being a graphics technology for the Web, is scalable in both senses of the word.
SVG graphics are scalable to different display resolutions, so that for example printed output uses the full resolution of the printer and can be displayed at the same size on screens of different resolutions. same SVG graphic can be placed at different sizes on the same Web page, and re-used at different sizes on different pages. SVG graphics can be magnified to see fine detail, or to aid those with low vision.
SVG graphics are scalable because the same SVG content can be a stand-alone graphic or can be referenced or included inside other SVG graphics, thereby allowing a complex illustration to be built up in parts, perhaps by several people. symbol, marker and font capabilities promote re-use of graphical components, maximize the advantages of HTTP caching and avoid the need for a centralized registry of approved symbols.
Vector graphics contain geometric objects such as lines and curves. This gives greater flexibility compared to raster-only formats (such as PNG and JPEG) which have to store information for every pixel of the graphic. Typically, vector formats can also integrate raster images and can combine them with vector information such as clipping paths to produce a complete illustration; SVG is no exception.
Since all modern displays are raster-oriented, the difference between raster-only and vector graphics comes down to where they are rasterized; client side in the case of vector graphics, as opposed to already rasterized on the server. SVG gives control over the rasterization process, for example to allow anti-aliased artwork without the ugly aliasing typical of low quality vector implementations. SVG also provides client-side raster filter effects, so that moving to a vector format does not mean the loss of popular effects such as soft drop shadows.
Most existing XML grammars represent either textual information, or represent raw data such as financial information. They typically provide only rudimentary graphical capabilities, often less capable than the HTML 'img' element. SVG fills a gap in the market by providing a rich, structured description of vector and mixed vector/raster graphics; it can бути використано stand-alone, or as an XML namespace with other grammars.
XML, a for structured information exchange, has become extremely popular and is both widely and reliably implemented. By being written in XML, SVG builds on this strong foundation and gains many advantages such as a sound basis for internationalization, powerful structuring capability, an object model, and so on. By building on existing, cleanly-implemented specifications, XML-based grammars are open to implementation without a huge reverse engineering effort.
It is certainly useful to have a stand-alone, SVG-only viewer. But SVG is also intended to бути використано as one component in a multi-namespace XML application. This multiplies the power of each of the namespaces used, to allow innovative new content to be created. For example, SVG graphics may be included in a document which uses any text-oriented XML namespace - including XHTML. A scientific document, for example, might also use MathML for mathematics in the document. combination of SVG and SMIL leads to interesting, time based, graphically rich presentations.
SVG is a good, general-purpose component for any multi-namespace grammar that needs to use graphics.
advantages of style sheets in terms of presentational control, flexibility, faster download and improved maintenance are now generally accepted, certainly for use with text. SVG extends this control to the realm of graphics.
combination of scripting, DOM and CSS is often termed "Dynamic HTML" and is widely used for animation, interactivity and presentational effects. SVG allows the same script-based manipulation of the document tree and the style sheet.
With any XML grammar, consideration has to be given to what exactly is being modelled. For textual formats, modelling is typically at the level of paragraphs and phrases, rather than individual nouns, adverbs, or phonemes. Similarly, SVG models graphics at the level of graphical objects rather than individual points.
SVG provides a general path element, which can бути використано to create a huge variety of graphical objects, and also provides common basic shapes such as rectangles and ellipses. These are convenient for hand coding and may бути використано in the same ways as the more general path element. SVG provides fine control over the coordinate system in which graphical objects are defined and the transformations that will be applied during rendering.
It would have been possible to define some standard symbols that SVG would provide. But which ones? There would always be additional symbols for electronics, cartography, flowcharts, etc., that people would need that were not provided until the "next version". SVG allows users to create, re-use and share their own symbols without requiring a centralized registry. Communities of users can create and refine the symbols that they need, without having to ask a committee. Designers can be sure exactly of the graphical appearance of the symbols they use and not have to worry about unsupported symbols.
Symbols may бути використано at different sizes and orientations, and can be restyled to fit in with the rest of the graphical composition.
Many existing Web graphics use the filtering operations found in paint packages to create blurs, shadows, lighting effects and so on. With the client-side rasterization used with vector formats, such effects might be thought impossible. SVG allows the declarative specification of filters, either singly or in combination, which can be applied on the client side when the SVG is rendered. These are specified in such a way that the graphics are still scalable and displayable at different resolutions.
Graphically rich material is often highly dependent on the particular font used and the exact spacing of the glyphs. In many cases, designers convert text to outlines to avoid any font substitution problems. This means that the original text is not present and thus searchability and accessibility suffer. In response to feedback from designers, SVG includes font elements so that both text and graphical appearance are preserved.
Animation can be produced via script-based manipulation of the document, but scripts are difficult to edit and interchange between authoring tools is harder. Again in response to feedback from the design community, SVG includes declarative animation elements which were designed collaboratively by the SVG and SYMM Working Groups. This allows the animated effects common in existing Web graphics to be expressed in SVG.
There are a variety of ways in which SVG content can be included within a Web page. Here are some of the options:
Implementations of SVG are expected to behave as though they implement a rendering (or imaging) model corresponding to the one described in this chapter. A real implementation is not required to implement the model in this way, but the result on any device supported by the implementation shall match that described by this model.
appendix on conformance requirements описує the extent to which an actual implementation may deviate from this description. In practice an actual implementation will deviate slightly because of limitations of the output device (e.g. only a limited range of colors might be supported) and because of practical limitations in implementing a precise mathematical model (e.g. for realistic performance curves are approximated by straight lines, the approximation need only be sufficiently precise to match the conformance requirements).
SVG uses a "painters model" of rendering. Paint is applied in successive operations to the output device such that each operation paints over some area of the output device. When the area overlaps a previously painted area the new paint partially or completely obscures the old. When the paint is not completely opaque the result on the output device is defined by the (mathematical) rules for compositing described under Alpha Blending.
Elements in an фрагменту документу SVG have an implicit drawing order, with the first elements in the фрагменту документу SVG getting "painted" first. Subsequent elements are painted on top of previously painted elements.
Grouping elements such as the ‘g’ element (дивіться контейнерний елементи) haveефект of producing a temporary separate canvas ініціалізований в transparent black onto which child elements are painted. Upon the completion of the group, any filter effects specified for the group are applied to create a modified temporary canvas. modified temporary canvas is composited into the background, taking into account any group-level masking and opacity settings on the group.
Individual графічний елементи are rendered as if each графічний елемент represented its own group; таким чином,ефект такий, якщо б було temporary separate canvas is created for each графічний елемент. element is first painted onto the temporary canvas (дивіться Painting shapes and text and Painting raster images below). Then any filter effects specified for the графічний елемент are applied to create a modified temporary canvas. modified temporary canvas is then composited into the background, taking into account any clipping, masking and object opacity settings on the графічний елемент.
SVG supports three fundamental types of графічний елементи that can be rendered onto the canvas:
Shapes and text can be filled (тобто, apply paint to the interior of the shape) and stroked (тобто, apply paint along the outline of the shape). A stroke operation is centered on the outline of the object; таким чином, in effect, half of the paint falls on the interior of the shape and half of the paint falls outside of the shape.
For certain types of shapes, marker symbols (which themselves can consist of any combination of shapes, text and images) can be drawn at selected vertices. Each marker symbol is painted as if its graphical content were expanded into the SVG document tree just after the shape object which is using the given marker symbol. graphical contents of a marker symbol are rendered using the same methods as графічний елементи. Marker symbols are not applicable to text.
fill is painted first, then the stroke, and then the marker symbols. marker symbols are rendered in order along the outline of the shape, from the start of the shape to the end of the shape.
Each fill and stroke operation has its own opacity settings; таким чином, you can fill and/or stroke a shape with a semi-transparently drawn solid color, with different opacity values for the fill and stroke operations.
fill and stroke operations are entirely independent painting operations; таким чином, if you both fill and stroke a shape, half of the stroke will be painted on top of part of the fill.
SVG supports the following built-in types of paint which can бути використано in fill and stroke Операції:
When a raster image is rendered, the original samples are "resampled" using standard algorithms to produce samples at the positions required on the output device. Resampling requirements are discussed under conformance requirements.
SVG allows any painting operation to be filtered. ( Дивіться Filter Effects.)
In this case the result must be as though the paint operations had been applied to an intermediate canvas ініціалізований в transparent black, of a size determined by the rules given in Filter Effects then filtered by the processes defined in Filter Effects.
SVG allows any painting operation to be limited to a subregion of the output device by clipping and masking. This is described in Clipping, Masking and Compositing.
Clipping uses a path to define a region of the output device to which paint can be applied. Any painting operation executed within the scope of the clipping must be rendered such that only those parts of the device that fall within the clipping region are affected by the painting operation. A clipping path can be thought of as a mask wherein those pixels outside the clipping path are black with an alpha значення zero and those pixels inside the clipping path are white with an alpha значення one. "Within" is defined by the same rules used to determine the interior of a path for painting. clipping path is typically anti-aliased on low-resolution devices (дивіться ‘shape-rendering’. Clipping is described in Clipping paths.
Masking uses the luminance of the color channels and alpha channel in a referenced SVG element to define a supplemental set of alpha values which are multiplied to the alpha values already present in the graphics to which the mask is applied. Masking is described in Masking.
A supplemental masking operation may also be specified by applying a "global" opacity to a set of rendering operations. In this case the mask is infinite, with a color of white and an alpha channel of the given opacity value. ( Дивіться the ‘opacity’ property.)
In all cases the SVG implementation must behave as though all painting and filtering is first performed to an intermediate canvas which has been ініціалізований в transparent black. Then, alpha values on the intermediate canvas are multiplied by the implicit alpha values from the clipping path, the alpha values from the mask, and the alpha values from the ‘opacity’ property. resulting canvas is composited into the background using simple alpha blending. Thus if an area of the output device is painted with a group opacity of 50% using opaque red paint followed by opaque green paint the result is as though it had been painted with just 50% opaque green paint. This is because the opaque green paint completely obscures the red paint on the intermediate canvas before the intermediate as a whole is rendered onto the output device.
фрагменту документу SVGs can be semi-opaque. In many environments (тобто, Web browsers), the фрагменту документу SVG has a final compositing step where the document as a whole is blended translucently into the background canvas.
EBNF grammar is as used in the XML specification, with the addition of ~, a case-insensitive literal: characters in the ASCII range (only) are declared to be case-insensitive. For example, ~"Hello" will match (H|h)(e|e)(l|L)(l|L)(o|O). This makes the productions much easier to read.
| ? | optional, zero or one |
| + | one or more |
| * | zero or more |
| | | alternation |
| "string" | literal |
| ~"string" | case-insensitive literal |
| [] | a character range |
| [^] | excluded character range |
| () | grouping |
This section defines a number of common data types used in the definitions of SVG properties and attributes. Some data types that are not referenced by multiple properties and attributes are defined inline in subsequent chapters.
Note that, as noted below, the specification of some types is different for CSS property values in style sheets (in the ‘style’ attribute, ‘style’ element or an external style sheet) than it is for for XML attribute values (including елементи презентації). This is due to restrictions in the CSS grammar. For example, scientific notation is allowed in attributes, including елементи презентації, but not in style sheets.
Angles are specified in one of two ways depending upon whether they are used in CSS property syntax or SVG presentation attribute syntax:
When an <angle> is used in a style sheet or with a property in a ‘style’ attribute, the syntax must match the following pattern:
angle ::= number (~"deg" | ~"grad" | ~"rad")?
where deg indicates degrees, grad indicates grads and rad indicates radians. unit identifier may be in lower (recommended) or upper case.
For properties defined in CSS2 [CSS2], an angle unit identifier must be provided (for non-zero values). For SVG-specific properties the angle unit identifier is optional. Якщо a unit is not provided, the angle value is assumed to be in degrees.
When an <angle> is used in an SVG presentation attribute, the syntax must match the following pattern:
angle ::= number ("deg" | "grad" | "rad")?
unit identifier, if present, must be in lower case; if not present, the angle value is assumed to be in degrees.
In the SVG DOM, <angle> values are represented using SVGAngle or SVGAnimatedAngle objects.
basic type <anything> is a sequence of zero or more characters. Specifically:
anything ::= Char*
where Char is the production for a character, as defined in XML 1.0 ([XML10], section 2.2).
basic type <color> is a CSS2 compatible specification for a color in the sRGB color space [SRGB]. <color> applies to SVG's use of the ‘color’ property and is a component of the definitions of properties ‘fill’, ‘stroke’, ‘stop-color’, ‘flood-color’ and ‘lighting-color’, which also offer optional ICC-based color specifications.
SVG supports all of the syntax alternatives for <color> defined in CSS2 syntax and basic data types ([CSS2], section 4.3.6), with the exception that SVG allows an expanded list of recognized color keywords names.
A <color> is either a keyword (дивіться Recognized color keyword names) or a numerical RGB specification.
In addition to these color keywords, users may specify keywords that correspond to the colors used by objects in the user's environment. normative definition of these keywords is found in User preferences for colors ([CSS2], section 18.2).
format of an RGB value in hexadecimal notation is a "#" immediately followed by either three or six hexadecimal characters. three-digit RGB notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by adding zeros. For example, #fb0 expands to #ffbb00. This ensures that white (#ffffff) can be specified with the short notation (#fff) and removes any dependencies on the color depth of the display. format of an RGB value in the functional notation is an RGB start-function followed by a comma-separated list of three numerical values (either three integer values or three percentage values) followed by ")". An RGB start-function is the case-insensitive string "rgb(", for example "RGB(" or "rGb(". For compatibility, the all-lowercase form "rgb(" is preferred. integer value 255 corresponds to 100%, and to F or FF in the hexadecimal notation: rgb(255,255,255) = rgb(100%,100%,100%) = #FFF. White space characters are allowed around the numerical values. All RGB colors are specified in the sRGB color space [SRGB]. Using sRGB provides an unambiguous and objectively measurable definition of the color, which can be related to international standards (дивіться [COLORIMETRY]).
color ::= "#" hexdigit hexdigit hexdigit (hexdigit hexdigit hexdigit)? | "rgb(" wsp* integer comma integer comma integer wsp* ")" | "rgb(" wsp* integer "%" comma integer "%" comma integer "%" wsp* ")" | color-keyword hexdigit ::= [0-9A-Fa-f] comma ::= wsp* "," wsp*
where color-keyword matches (case insensitively) one of the color keywords listed in Recognized color keyword names below, or one of the system color keywords listed in User preferences for colors ([CSS2], section 18.2).
corresponding SVG DOM interface definitions for <color> are defined in Document Object Model CSS; in particular, see RGBColor ([DOM2STYLE], section 2.2). SVG's extension to color, including the ability to specify ICC-based colors, are represented using DOM Інтерфейс SVGColor.
A <coordinate> is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the relevant axis (the x-axis for X coordinates, the y-axis for Y coordinates). Its syntax is the same as that for <length>.
coordinate ::= length
Within the SVG DOM, a <coordinate> is represented as an SVGLength or an SVGAnimatedLength.
Frequency values are used with aural properties. As defined in CSS2, a frequency value is a <number> immediately followed by a frequency unit identifier. frequency unit identifiers are:
Frequency values may not be negative.
In the SVG DOM, <frequency> values are represented using the CSSPrimitiveValue interface defined in Document Object Model CSS ([DOM2STYLE], section 2.2).
An <icccolor> is an ICC color specification. In SVG 1.1, an ICC color specification is given by a name, which references a ‘color-profile’ element, and one or more color component values. grammar is as follows:
icccolor ::= "icc-color(" name (comma-wsp number)+ ")" name ::= [^,()#x20#x9#xD#xA] /* any char except ",", "(", ")" or wsp */
corresponding SVG DOM interface for <icccolor> is SVGICCColor.
An <integer> is specified as an optional sign character ("+" or "-") followed by one or more digits "0" to "9":
integer ::= [+-]? [0-9]+
Якщо the sign character is not present, the number is non-negative.
Unless stated otherwise for a particular attribute or property, the range for an <integer> encompasses (at a minimum) -2147483648 to 2147483647.
Within the SVG DOM, an <integer> is represented as a long or an SVGAnimatedInteger.
An Internationalized Resource Identifier (дивіться IRI). For the specification of IRI references in SVG, see IRI references.
A length is a distance measurement, given as a number along with a unit which may be optional. Lengths are specified in one of two ways depending upon whether they are used in CSS property syntax or SVG presentation attribute syntax:
When a <length> is used in a style sheet or with a property in a ‘style’ attribute, the syntax must match the following pattern:
length ::= number (~"em" | ~"ex" | ~"px" | ~"in" | ~"cm" | ~"mm" | ~"pt" | ~"pc")?
Дивіться the CSS2 specification for the meanings of the unit identifiers. unit identifier may be in lower (recommended) or upper case.
For properties defined in CSS2 [CSS2], a length unit identifier must be provided (for non-zero values). For SVG-specific properties, the length unit identifier is optional. Якщо a unit is not provided, the length value represents a distance in the current user coordinate system.
When a <length> is used in an SVG presentation attribute, the syntax must match the following pattern:
length ::= number ("em" | "ex" | "px" | "in" | "cm" | "mm" | "pt" | "pc" | "%")?
unit identifier, if present, must be in lower case; if not present, the length value represents a distance in the current user coordinate system.
Note that the non-property <length> definition also allows a percentage unit identifier. meaning of a percentage length value depends on the attribute for which the percentage length value has been specified. Two common cases are: (a) when a percentage length value represents a percentage of the viewport width or height (refer to the section that discusses units in general), and (b) when a percentage length value represents a percentage of the bounding box width or height on a given object (refer to the section that описує object bounding box units).
In the SVG DOM, <length> values are represented using SVGLength or SVGAnimatedLength objects.
A <list-of-family-names> is a list of font family names using the same syntax as the ‘font-family’ property, excluding the <generic-family> and 'inherit' values.
A <list-of-strings> consists of a separated sequence of <string>s. String lists are white space-separated, where white space is defined as one or more of the following consecutive characters: "space" (U+0020), "tab" (U+0009), "line feed" (U+000A) and "carriage return" (U+000D).
following is an EBNF grammar describing the <list-of-strings> syntax:
list-of-strings ::= string
| string wsp list-of-strings
string ::= [^#x9#xA#xD#x20]*
wsp ::= [#x9#xA#xD#x20]+
(Where T is a type other than <string> and <family-name>.) A list consists of a separated sequence of values. Unless explicitly described differently, lists within SVG's XML attributes can be either comma-separated, with optional white space before or after the comma, or white space-separated.
White space in lists is defined as one or more of the following consecutive characters: "space" (U+0020), "tab" (U+0009), "line feed" (U+000A), "carriage return" (U+000D) and "form-feed" (U+000C).
following is a template for an EBNF grammar describing the <list-of-Ts> syntax:
list-of-Ts ::= T | T comma-wsp list-of-Ts comma-wsp ::= (wsp+ ","? wsp*) | ("," wsp*) wsp ::= (#x20 | #x9 | #xD | #xA)
Within the SVG DOM, values of a <list-of-Ts> type are represented by an interface specific for the particular type T. For example, a <list-of-lengths> is represented in the SVG DOM using an SVGLengthList or SVGAnimatedLengthList object.
A name, which is a string where a few characters of syntactic significance are disallowed.
name ::= [^,()#x20#x9#xD#xA] /* any char except ",", "(", ")" or wsp */
Real numbers are specified in one of two ways. When used in a style sheet, a <number> is defined as follows:
number ::= integer | [+-]? [0-9]* "." [0-9]+
This syntax is the same as the definition in CSS ([CSS2], section 4.3.1).
When used in an SVG attribute, a <number> is defined differently, to allow numbers with large magnitudes to be specified more concisely:
number ::= integer ([Ee] integer)? | [+-]? [0-9]* "." [0-9]+ ([Ee] integer)?
Within the SVG DOM, a <number> is represented as a float, SVGNumber or a SVGAnimatedNumber.
A pair of <number>s, where the second <number> is optional.
number-optional-number ::= number | number comma-wsp number
In the SVG DOM, a <number-optional-number> is represented using a pair of SVGAnimatedInteger or SVGAnimatedNumber objects.
values for properties ‘fill’ and ‘stroke’ are specifications of the type of paint to use when filling or stroking a given графічний елемент. available options and syntax for <paint> are described in Specifying paint.
Within the SVG DOM, <paint> values are represented using SVGPaint objects.
Percentages are specified as a number followed by a "%" character:
percentage ::= number "%"
Note that the definition of <number> depends on whether the percentage is specified in a style sheet or in an attribute that is not also a presentation attribute.
Percentage values are always relative to another value, for example a length. Each attribute or property that allows percentages also defines the reference distance measurement to which the percentage refers.
Within the SVG DOM, a <percentage> is represented using an SVGNumber or SVGAnimatedNumber object.
A time value is a <number> immediately followed by a time unit identifier. time unit identifiers are:
In the SVG DOM, <time> values are represented using the CSSPrimitiveValue interface defined in Document Object Model CSS ([DOM2STYLE], section 2.2).
A <transform-list> is used to specify a list of coordinate system transformations. A detailed description of the possible values for a <transform-list> is given in Modifying the User Coordinate System: the transform attribute.
Within the SVG DOM, a <transform-list> value is represented using an SVGTransformList or SVGAnimatedTransformList object.
An XML name, as defined by the Name production in Extensible Markup Language (XML) 1.0 ([XML10], section 2.3).
Unless stated otherwise for a particular attribute or property, a <number> has the capacity for at least a single-precision floating point number and has a range (at a minimum) of -3.4e+38F to +3.4e+38F.
It is recommended that higher precision floating point storage and computation be performed on operations such as coordinate system transformations to provide the best possible precision and to prevent round-off errors.
Conforming High-Quality SVG Viewers are required to use at least double-precision floating point for intermediate calculations on certain numerical operations.
following is the list of recognized color keywords that can бути використано as a keyword value for data type <color>:
|
|
Інтерфейс SVGElement : Element { attribute DOMString id setraises(DOMException); attribute DOMString xmlbase setraises(DOMException); readonly attribute SVGElement ownerSVGElement; readonly attribute SVGElement viewportElement; };
Інтерфейс SVGAnimatedBoolean {
attribute boolean baseVal setraises(DOMException);
readonly attribute boolean animVal;
};
Інтерфейс SVGAnimatedString {
attribute DOMString baseVal setraises(DOMException);
readonly attribute DOMString animVal;
};
This interface defines a list of DOMString values.
SVGStringList has the same attributes and methods as other SVGxxxList interfaces. Implementers may consider using a single base class to implement the various SVGxxxList interfaces.
Інтерфейс SVGStringList {
readonly attribute unsigned long numberOfItems;
void clear() raises(DOMException);
DOMString initialize(in DOMString newItem) raises(DOMException);
DOMString getItem(in unsigned long index) raises(DOMException);
DOMString insertItemBefore(in DOMString newItem, in unsigned long index) raises(DOMException);
DOMString replaceItem(in DOMString newItem, in unsigned long index) raises(DOMException);
DOMString removeItem(in unsigned long index) raises(DOMException);
DOMString appendItem(in DOMString newItem) raises(DOMException);
};
Інтерфейс SVGAnimatedEnumeration {
attribute unsigned short baseVal setraises(DOMException);
readonly attribute unsigned short animVal;
};
Інтерфейс SVGAnimatedInteger {
attribute long baseVal setraises(DOMException);
readonly attribute long animVal;
};
Інтерфейс SVGNumber {
attribute float value setraises(DOMException);
};
Інтерфейс SVGAnimatedNumber {
attribute float baseVal setraises(DOMException);
readonly attribute float animVal;
};
This interface defines a list of SVGNumber objects.
SVGNumberList has the same attributes and methods as other SVGxxxList interfaces. Implementers may consider using a single base class to implement the various SVGxxxList interfaces.
An SVGNumberList object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown, as described below.
Інтерфейс SVGNumberList {
readonly attribute unsigned long numberOfItems;
void clear() raises(DOMException);
SVGNumber initialize(in SVGNumber newItem) raises(DOMException);
SVGNumber getItem(in unsigned long index) raises(DOMException);
SVGNumber insertItemBefore(in SVGNumber newItem, in unsigned long index) raises(DOMException);
SVGNumber replaceItem(in SVGNumber newItem, in unsigned long index) raises(DOMException);
SVGNumber removeItem(in unsigned long index) raises(DOMException);
SVGNumber appendItem(in SVGNumber newItem) raises(DOMException);
};
Інтерфейс SVGAnimatedNumberList {
readonly attribute SVGNumberList baseVal;
readonly attribute SVGNumberList animVal;
};
SVGLength інтерфейс відповідає <length> basic data type.
An SVGLength object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown, as described below.
Інтерфейс SVGLength {
// Length Unit Types
const unsigned short SVG_LENGTHTYPE_UNKNOWN = 0;
const unsigned short SVG_LENGTHTYPE_NUMBER = 1;
const unsigned short SVG_LENGTHTYPE_PERCENTAGE = 2;
const unsigned short SVG_LENGTHTYPE_EMS = 3;
const unsigned short SVG_LENGTHTYPE_EXS = 4;
const unsigned short SVG_LENGTHTYPE_PX = 5;
const unsigned short SVG_LENGTHTYPE_CM = 6;
const unsigned short SVG_LENGTHTYPE_MM = 7;
const unsigned short SVG_LENGTHTYPE_IN = 8;
const unsigned short SVG_LENGTHTYPE_PT = 9;
const unsigned short SVG_LENGTHTYPE_PC = 10;
readonly attribute unsigned short unitType;
attribute float value setraises(DOMException);
attribute float valueInSpecifiedUnits setraises(DOMException);
attribute DOMString valueAsString setraises(DOMException);
void newValueSpecifiedUnits(in unsigned short unitType, in float valueInSpecifiedUnits) raises(DOMException);
void convertToSpecifiedUnits(in unsigned short unitType) raises(DOMException);
};
Інтерфейс SVGAnimatedLength {
readonly attribute SVGLength baseVal;
readonly attribute SVGLength animVal;
};
This interface defines a list of SVGLength objects.
SVGLengthList has the same attributes and methods as other SVGxxxList interfaces. Implementers may consider using a single base class to implement the various SVGxxxList interfaces.
An SVGLengthList object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown, as described below.
Інтерфейс SVGLengthList {
readonly attribute unsigned long numberOfItems;
void clear() raises(DOMException);
SVGLength initialize(in SVGLength newItem) raises(DOMException);
SVGLength getItem(in unsigned long index) raises(DOMException);
SVGLength insertItemBefore(in SVGLength newItem, in unsigned long index) raises(DOMException);
SVGLength replaceItem(in SVGLength newItem, in unsigned long index) raises(DOMException);
SVGLength removeItem(in unsigned long index) raises(DOMException);
SVGLength appendItem(in SVGLength newItem) raises(DOMException);
};
Інтерфейс SVGAnimatedLengthList {
readonly attribute SVGLengthList baseVal;
readonly attribute SVGLengthList animVal;
};
SVGAngle інтерфейс відповідає <angle> basic data type.
An SVGAngle object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown, as described below.
Інтерфейс SVGAngle {
// Angle Unit Types
const unsigned short SVG_ANGLETYPE_UNKNOWN = 0;
const unsigned short SVG_ANGLETYPE_UNSPECIFIED = 1;
const unsigned short SVG_ANGLETYPE_DEG = 2;
const unsigned short SVG_ANGLETYPE_RAD = 3;
const unsigned short SVG_ANGLETYPE_GRAD = 4;
readonly attribute unsigned short unitType;
attribute float value setraises(DOMException);
attribute float valueInSpecifiedUnits setraises(DOMException);
attribute DOMString valueAsString setraises(DOMException);
void newValueSpecifiedUnits(in unsigned short unitType, in float valueInSpecifiedUnits) raises(DOMException);
void convertToSpecifiedUnits(in unsigned short unitType) raises(DOMException);
};
Інтерфейс SVGAnimatedAngle {
readonly attribute SVGAngle baseVal;
readonly attribute SVGAngle animVal;
};
SVGColor interface corresponds to color value definition for properties ‘stop-color’, ‘flood-color’ and ‘lighting-color’ and is a base class for Інтерфейс SVGPaint. It incorporates SVG's extended notion of color, which incorporates ICC-based color specifications.
Інтерфейс SVGColor does not correspond to the <color> basic data type. For the <color> basic data type, the applicable DOM interfaces are defined in DOM Level 2 Style; in particular, see the RGBColor interface ([DOM2STYLE], section 2.2).
Note: SVGColor interface is deprecated, and may be dropped from future versions of the SVG specification.
Інтерфейс SVGColor : CSSValue { // Color Types const unsigned short SVG_COLORTYPE_UNKNOWN = 0; const unsigned short SVG_COLORTYPE_RGBCOLOR = 1; const unsigned short SVG_COLORTYPE_RGBCOLOR_ICCCOLOR = 2; const unsigned short SVG_COLORTYPE_CURRENTCOLOR = 3; readonly attribute unsigned short colorType; readonly attribute RGBColor rgbColor; readonly attribute SVGICCColor iccColor; void setRGBColor(in DOMString rgbColor) raises(SVGException); void setRGBColorICCColor(in DOMString rgbColor, in DOMString iccColor) raises(SVGException); void setColor(in unsigned short colorType, in DOMString rgbColor, in DOMString iccColor) raises(SVGException); };
SVGICCColor interface expresses an ICC-based color specification.
Note: SVGICCColor interface is deprecated, and may be dropped from future versions of the SVG specification.
Інтерфейс SVGICCColor {
attribute DOMString colorProfile setraises(DOMException);
readonly attribute SVGNumberList colors;
};
Represents rectangular geometry. Rectangles are defined as consisting of a (x,y) coordinate pair identifying a minimum X value, a minimum Y value, and a width and height, which are usually constrained to be non-negative.
An SVGRect object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown, as described below.
Інтерфейс SVGRect {
attribute float x setraises(DOMException);
attribute float y setraises(DOMException);
attribute float width setraises(DOMException);
attribute float height setraises(DOMException);
};
Інтерфейс SVGAnimatedRect {
readonly attribute SVGRect baseVal;
readonly attribute SVGRect animVal;
};
Інтерфейс SVGUnitTypes {
// Unit Types
const unsigned short SVG_UNIT_TYPE_UNKNOWN = 0;
const unsigned short SVG_UNIT_TYPE_USERSPACEONUSE = 1;
const unsigned short SVG_UNIT_TYPE_OBJECTBOUNDINGBOX = 2;
};
Інтерфейс SVGStylable {
readonly attribute SVGAnimatedString className;
readonly attribute CSSStyleDeclaration style;
CSSValue getPresentationAttribute(in DOMString name);
};
Note: getPresentationAttribute method is
deprecated, and may be dropped from future versions of the
SVG specification.
Інтерфейс SVGLocatable {
readonly attribute SVGElement nearestViewportElement;
readonly attribute SVGElement farthestViewportElement;
SVGRect getBBox();
SVGMatrix getCTM();
SVGMatrix getScreenCTM();
SVGMatrix getTransformToElement(in SVGElement element) raises(SVGException);
};
getClientCTM, but the name getScreenCTM
is kept for historical reasons. Інтерфейс SVGTransformable : SVGLocatable { readonly attribute SVGAnimatedTransformList transform; };
Інтерфейс SVGTests {
readonly attribute SVGStringList requiredFeatures;
readonly attribute SVGStringList requiredExtensions;
readonly attribute SVGStringList systemLanguage;
boolean hasExtension(in DOMString extension);
};
Інтерфейс SVGLangSpace {
attribute DOMString xmllang setraises(DOMException);
attribute DOMString xmlspace setraises(DOMException);
};
Інтерфейс SVGExternalResourcesRequired {
readonly attribute SVGAnimatedBoolean externalResourcesRequired;
};
Інтерфейс SVGFitToViewBox {
readonly attribute SVGAnimatedRect viewBox;
readonly attribute SVGAnimatedPreserveAspectRatio preserveAspectRatio;
};
Інтерфейс SVGZoomAndPan {
// Zoom and Pan Types
const unsigned short SVG_ZOOMANDPAN_UNKNOWN = 0;
const unsigned short SVG_ZOOMANDPAN_DISABLE = 1;
const unsigned short SVG_ZOOMANDPAN_MAGNIFY = 2;
attribute unsigned short zoomAndPan setraises(DOMException);
};
Інтерфейс SVGViewSpec : SVGZoomAndPan, SVGFitToViewBox { readonly attribute SVGTransformList transform; readonly attribute SVGElement viewTarget; readonly attribute DOMString viewBoxString; readonly attribute DOMString preserveAspectRatioString; readonly attribute DOMString transformString; readonly attribute DOMString viewTargetString; };
Інтерфейс SVGURIReference {
readonly attribute SVGAnimatedString href;
};
SVG extends interface CSSRule with Інтерфейс SVGCSSRule by adding an SVGColorProfileRule rule to allow for specification of ICC-based color.
It is likely that this extension will become part of a future version of CSS and DOM.
Інтерфейс SVGCSSRule : CSSRule { const unsigned short COLOR_PROFILE_RULE = 7; };
Інтерфейс SVGRenderingIntent {
// Rendering Intent Types
const unsigned short RENDERING_INTENT_UNKNOWN = 0;
const unsigned short RENDERING_INTENT_AUTO = 1;
const unsigned short RENDERING_INTENT_PERCEPTUAL = 2;
const unsigned short RENDERING_INTENT_RELATIVE_COLORIMETRIC = 3;
const unsigned short RENDERING_INTENT_SATURATION = 4;
const unsigned short RENDERING_INTENT_ABSOLUTE_COLORIMETRIC = 5;
};
Фрагмент документу SVG складається з довільного числа елементів SVG, що містяться в елементі ‘svg’.
Фрагмент документу SVG може варіюватись від пустого фрагменту (тобто без вмісту в елементі ‘svg’ ), до дуже простого фрагменту документа SVG, що містить один графічний елемент SVG, такій як ‘rect’, до складних, глибоко вкладениих наборів контейнерних елементів та графічних елементів.
Фрагмент документу SVG може стояти окремо, як самодостатній файл або ресурс, і в цьому випадку фрагмент SVG документу є SVG документом, або він може бути вбудований як фрагмент в батьківський XML документ.
Наступний приклад показує простий SVG вміст, як фрагмент в батьківському XML документі. Зауважте використання просторів імен XML, щоб вказати, що елементи ‘svg’ та ‘ellipse’ належать до простору імен SVG:
<?xml version="1.0" standalone="yes"?>
<parent xmlns="http://example.org"
xmlns:svg="http://www.w3.org/2000/svg">
<!-- parent contents here -->
<svg:svg width="4cm" height="8cm" version="1.1">
<svg:ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" />
</svg:svg>
<!-- ... -->
</parent>
Цей приклад показує дещо більш складний (що містить декілька прямокутників) окремий, самодостатній SVG документ:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="4cm" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<desc>Four separate rectangles
</desc>
<rect x="0.5cm" y="0.5cm" width="2cm" height="1cm"/>
<rect x="0.5cm" y="2cm" width="1cm" height="1.5cm"/>
<rect x="3cm" y="0.5cm" width="1.5cm" height="2cm"/>
<rect x="3.5cm" y="3cm" width="1cm" height="0.5cm"/>
<!-- Show outline of canvas using 'rect' element -->
<rect x=".01cm" y=".01cm" width="4.98cm" height="3.98cm"
fill="none" stroke="blue" stroke-width=".02cm" />
</svg>
Елементи ‘svg’ можуть з’являтись всередині SVG вмісту. Це той механізм, яким фрагменти SVG документу можуть бути вбудовані в інші фрагменти документу SVG.
Інше використання елементів ‘svg’ є встановлення нового поля перегляду. (Дивіться Встановлення нового поля перегляду).
В жодному випадку, для відповідності до рекомендацій Простори імен в XML [XML-NS], має бути проваджена декларація простору імен SVG, так що SVG елементи ідентифікуються як ті, що належать до простору імен SVG. Можливі наступні шляхи для провадження декларації простору імен. Атрибут ‘xmlns’ без префіксу простору імен може бути вказаний для ‘svg’ елементу, що означає, що SVG є простором імен по замовчанню в полі дії елементу з атрибутом ‘xmlns’:
<svg xmlns="http://www.w3.org/2000/svg" …> <rect …/> </svg>
Якщо профікс простору імен вказаний на атрибуті ‘xmlns’
(тобто xmlns:svg="http://www.w3.org/2000/svg"),
тоді
відповідний простір імен не є простором імен по замовчанню, так що для
елементів має бути вказаний явний префікс простору імен:
<svg:svg xmlns:svg="http://www.w3.org/2000/svg" …> <svg:rect …/> </svg:svg>
Префікси просторів імен можуть бути вказані на елементах-потомках (як проілюстровано на прикладі вище). Для додаткової інформації посилайтесь на рекомендацію Простори імен в XML [XML-NS].
Визначення атрибутів:
Дивіться ‘preserveAspectRatio’.
Якщо атрибут не вказано, тоді ефект такий, якщо б було вказано значення 'xMidYMid meet'.
Анімується: так.
Дивіться 'contentScriptType'.
Дивіться 'contentStyleType'.
Дивіться 'zoomAndPan'.
Якщо документ SVG вірогідно буде служити для посилання як компонент іншого документу, автор часто має забажати включити атрибут ‘viewBox’ на найбільш зовнішньому елементі svg документу, на який буде посилання. Цей атрибут провадить зручний шлях розробляти SVG документи для маштабування в довільному полі перегляду.
Елемент ‘g’ є контейнерним елементом для групування разом пов’язаних графічних елементів.
Групування конструктивів, коли використовується поєднано з елементами ‘desc’ та ‘title’, провадить інформацію щодо структури та семантики документів. Документи, що мають багату структуру, можуть бути відтворені графічно, голосом, або брайлем, і таким чином просувають доступність.
Група елементів, також як і індивідуальні об’єкти, можуть набути ім’я, використовуючи атрибут ‘id’. Іменовані групи потрібні для декількох призначень, таких, як анімація та повторне використання об’єктів.
Приклад:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1" width="5cm" height="5cm">
<desc>Two groups, each of two rectangles</desc>
<g id="group1" fill="red">
<rect x="1cm" y="1cm" width="1cm" height="1cm"/>
<rect x="3cm" y="1cm" width="1cm" height="1cm"/>
</g>
<g id="group2" fill="blue">
<rect x="1cm" y="3cm" width="1cm" height="1cm"/>
<rect x="3cm" y="3cm" width="1cm" height="1cm"/>
</g>
<!-- Show outline of canvas using 'rect' element -->
<rect x=".01cm" y=".01cm" width="4.98cm" height="4.98cm"
fill="none" stroke="blue" stroke-width=".02cm"/>
</svg>
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
Елемент ‘g’ може містити інші елементи ‘g’, вкладені в нього на довільну глибину. Таким чином, можливо наступне:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1" width="4in" height="3in">
<desc>Groups can nest</desc>
<g>
<g>
<g>
</g>
</g>
</g>
</svg>
Кожний елемент, що не міститься в ‘g’, трактується (щонайменш, концептуально) якби він знаходився у власній групі.
SVG дозволяє визначати графічні об’єкти для подальшого використання. Щоб зробити це, екстенсивно використовуються посилання IRI [RFC3987] на ці інші об’єкти. Наприклад, щоб заповнити прямокутник лінійним градієнтом, ви спочатку визначаєте елемент ‘linearGradient’, та надаєте йому ID, ось так:
<linearGradient id="MyGradient">...</linearGradient>
Потім ви посилаєтесь на лінійний градієнт як значення властивості ‘fill’ для промокутника, таким чином:
<rect style="fill:url(#MyGradient)"/>
Деякі типи елементів, такі як градієнти, не будуть створювати графічний результат сами по собі. Вони можуть, таким чином, розташовуватись де зручно. Однак, часом бажано визначити графічний об’єкт та завадити його пряме відтворення. Він існує тільки для того, щоб десь посилатись на нього. Щоб зробити це, та забезпечити зручне групування визначенного вмісту, SVG провадить елемент ‘defs’.
Рекомендовано, щоб коли можливо, елементи, на які посилаються, були визначені в елементах ‘defs’. Поміж інших, елементи, які завжди використовуються через посилання: ‘altGlyphDef’, ‘clipPath’, ‘cursor’, ‘filter’, ‘linearGradient’, ‘marker’, ‘mask’, ‘pattern’, ‘radialGradient’ та ‘symbol’. Визначення ціх елементів в елементі ‘defs’ пропагує зрозумілість вмісту SVG, і таким чином пропагує доступність.
Елемент ‘defs’ є контейнерним елементом для елементів, на які посилаються. З причин зрозумілості та доступності, рекомендовано, щоб, коли можливо, елементи, на які посилаються, були визначені в ‘defs’.
Модель вмісту для ‘defs’ є такою ж, як і для елементу ‘g’; таким чином, любий елемент, що може бути дочірнім для ‘g’, може також бути дочірнім для ‘defs’, та навпаки.
Елементи, що є потомками ‘defs’ не відтворюються безпосередньо; вони відхиляються від того, щоб стати частиною дерева відтворення, саме так, якби елемент ‘defs’ був елементом ‘g’, та властивість ‘display’ була встановлена в none. Однак зауважте, що потомки ‘defs’ завжди присутні в дереві джерела, і таким чином на них завжди можна посилатись з інших елементів; таким чином, значення властивості ‘display’ для елементу ‘defs’, або любого нащадка, не заважає цім елементам бути ціллю посилання в інших елементах.
Щоб надати деяким користувацькім агентам SVG можливість реалізувати ефективну реалізацію в потокових середовищах, будівельники SVG вмісту заохочуються розміщувати всі елементи, які є цілями локальних посилань IRI в елементі ‘defs’, що є прямим потомком одного з предків елементу, що використовує посилання. Наприклад:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="8cm" height="3cm"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Local URI references within ancestor's 'defs' element.</desc>
<defs>
<linearGradient id="Gradient01">
<stop offset="20%" stop-color="#39F" />
<stop offset="90%" stop-color="#F3F" />
</linearGradient>
</defs>
<rect x="1cm" y="1cm" width="6cm" height="1cm"
fill="url(#Gradient01)" />
<!-- Show outline of canvas using 'rect' element -->
<rect x=".01cm" y=".01cm" width="7.98cm" height="2.98cm"
fill="none" stroke="blue" stroke-width=".02cm" />
</svg>
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
В документі вище лінійний градієнт, визначений в елементі ‘defs’, що є примим потомком елементу ‘svg’, що, з іншого боку, є предком елементу ‘rect’, що посилається на лінійний градієнт. Таким чином, вище згаданий документ задовільняє рекомендаціям.
Кожний контейнерний елемент або графічний елемент малюнку SVG може включати описові рядки ‘desc’ та/або ‘title’, де опис містить тільки текст. Коли поточний фрагмент документу SVG відтворюється як SVG на візуальному медіа, елементи ‘desc’ та ‘title’ не відтворюються як частина графіки. Користувацькі агенти можуть, однак, відобразити елемент ‘title’ як підказку, коли вказівний пристрій рухається над окремим елементом. Можливі альтернативні презентації, як візуальні, так і звукові, що відображують елементи ‘desc’ та ‘title’, але не відображують елементи ‘path’ або графічні елементи. Це легко досягається з використанням іншого (можливо користувацького) листа стилів. Для глибоких ієрархій, та для подальших посилань елементів ‘use’, часом бажано дозволити користувачу контролювати, наскільки глибоко вони занурюються в описовий текст.
В відповідному фрагменті документу SVG кожний елемент ‘title’ повинен бути першим дочірнім елементом батька. Зауважте, що ці реалізації, що використовують ‘title’ для відображення підказок, часто будуть робити це, якщо ‘title’ дійсно є першим дочірнім елементом свого батька.
Далі слідує приклад. При типових операціях, користувацький агент SVG не буде відтворювати елементи ‘desc’ та ‘title’, але буде малювати інший вміст елементу ‘g’.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1" width="4in" height="3in">
<g>
<title>Company sales by region</title>
<desc>
This is a bar chart which shows
company sales by region.
</desc>
<!-- Bar chart defined as vector data -->
</g>
</svg>
Описи та елементи можуть містити розміченний текст з інших просторів імен. Ось приклад:
<?xml version="1.0" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1" width="4in" height="3in">
<desc xmlns:mydoc="http://example.org/mydoc">
<mydoc:title>This is an example SVG file</mydoc:title>
<mydoc:para> global description uses markup from the
<mydoc:emph>mydoc</mydoc:emph> namespace.</mydoc:para>
</desc>
<g>
<!-- the picture goes here -->
</g>
</svg>
Авторам слідує завжди провадити дочірній елемент ‘title’ для найбільш зовнішнього елементу svg для окремих документів SVG. Дочірній елемент ‘title’ для елементу ‘svg’ служить цілям ідентифікації вмісту даного фрагменту документа SVG. Оскільки користувачі часто консультуються з документами за рамками контексту, автори повинні провадить прив’язані до контексту заголовки. Таким чином, замість заголовку, такого як "Вступ", що не надає багато контекстного підгрунтя, замість цього авторам слідує надавати заголовки, такі як "Вступ до середньовічного бджільництва". Для цілей доступності, користувацькі агенти повинні завжди робити вміст дочірнього елементу ‘title’ до самого зовнішнього елементу svg доступним для користувача. Механізм зробити це залежить від користувацького агента (відобразити в заголовку, промовити, таке інше).
DTD визначення багатьох SVG елементів (зокрема, контейнерних та текстових елементів) не накладає обмежень на розміщення та число піделементів ‘desc’та ‘title’. Ця гнучкість існує тільки для того, щоб мати сумісну модель вмісту для контейнерних елементів, оскільки деякі контейнерні елементи в SVG дозволяють змішаний вміст, та оскільки змішаний вміст має правила для XML ([XML10], розділ 3.2.2), що не дозволяють бажаних обмежень. Репрезентації майбутніх версій мови SVG можуть використовувати більш виразні репрезентації, ніж DTD, що дозволить більш обмежувальні привила змішаного вмісту. Є дуже рекомендованим, щоб щонайбільше один елемент ‘desc’ та щонайбільше один елемент ‘title’ з’являлись як дочірні в кожному окремому елементі, та що б ці елементи з’являлись перед любим іншим дочірнім елементом (можливо, за винятком елементів ‘metadata’) або вміст символьних даних. Якщо користувацькі агенти потребують обрати між багатьма елементами ‘desc’ та ‘title’ для обробки (тобто вирішити, який рядок використовувати для підказки), користувацький агент повинен обрати перший встрічний.
Елемент ‘symbol’ використовується для визначення графічних шаблонних об’єктів, що можуть бути втілені в документі елемента ‘use’.
Використання елементів ‘symbol’ для графіки, що використовується багато разів в тому ж документі, додає структури та семантики. Документи, що багаті на структуру, можуть бути відтворені графічно, як промова або брайлем, та таким чином просувають доступність.
Ключові відмінності між ‘symbol’та ‘g’ наступна :
Близкі до елементу ‘symbol’ є елементи ‘marker’ та ‘pattern’.
Елементи ‘symbol’ ніколи не відтворюються безпосередньо; єдине їх використання в тому, що на них може бути створене посилання з використанням елементу ‘use’. Властивість ‘display’ не стосується до елементу ‘symbol’; таким чином, елементи ‘symbol’ не будуть беспосередньо відтворюватись, навіть якщо властивість ‘display’ встановлена в значення, відмінне від none, та елементи ‘symbol’ доступні для посилань, навіть коли властивість ‘display’ на елементі ‘symbol’ або любому з його предків встановлено в none.
Любий ‘svg’, ‘symbol’, ‘g’, графічний елемент або інший ‘use’ потенційно є об’єктом-шаблоном, що може бути використаний повторно ("стоворений екземпляр") в документі SVG через елемент ‘use’. Елемент ‘use’ посилається на інший елемент, та вказує, що графічний вміст того елементу вставлений/намальований в даній точці документу.
На відміну від ‘image’, елемент ‘use’ не може посилатись на цілі файли.
Елемент ‘use’ має опціональні атрибути ‘x’, ‘y’, ‘width’ та ‘height’, що використовуються для відображення графічного вмісту елементу на прямокутний регіон в поточній координатній системі.
Ефект елементу ‘use’ такий, якби вміст елемента, на який посилаються, був глибоко склонований в окреме, приховане дерево DOM, що має елемент ‘use’ в якості батьківського та всіх предків елементу ‘use’ в якості предків вищих рівнів. Оскільки клоноване дерево DOM є прихованим, SVG Document Object Model (DOM) містить тільки елемент ‘use’, та його атрибути. SVG DOM не показує вміст елементу, на який посилаються, як потомків елементу ‘use’.
Для користувацькіх агентів, що підтримують стилі за допомогою CSS, концептуальне глибоке клонування посиланого елементу в приховане DOM дерево, також копіює любі значення властивостей, що є результатом каскадів CSS ([CSS2], глава 6) на посилаємий елемент та його вміст. Селектори CSS2 можуть бути застосовані до оригінальних елементів (того, на що посилаються), оскільки вони є частиною формальної структури документу. Селектори не можуть застосовуватись до (концептуально) клонованого дерева DOM, оскільки його вміст не є частиною формальної структури документу.
Наслідування властивостей, однак, робить так, якби посилаємий елемент був текстуально вставлений як глибоко клонований потомок елементу ‘use’. Посилаємий елемент наслідує властивості від елементу ‘use’ та предків елементу ‘use’. Екземпляр посиланого елементу не наслідує властивостей від оригінальних батьків посиланого елементу.
Якщо атрибути подій призначені до посилаємих елементів, тоді справжньою ціллю для події буде об’єкт SVGElementInstance в "дереві екземпляра", що відповідає даному посилаємому елементу.
Обробка подій для прихованого дерева робить так, якби посилаємий елемент був текстуально вставлений як глибоко клонований нащадок елементу ‘use’, за винятком того, що події направляються об’єкту SVGElementInstance. Атрибути target та currentTarget встановлені в SVGElementInstance, що відповідає цілі та поточній цілі елементів в посилаємому піддереві. Подія поширюється через відкриту та приховану частини дерева, в той же спосіб, як це відбувається в звичайному дереві документа: спершу проходить скрізь кореневий елемент до елементу ‘use’, та потім скрізь приховане дерево елементів в фазі захоплення, слідуючи на цільовій фазі до цілі події. Після цього спливає назад через прихование дерево до елемента use, та потім назад через звичайне дерево до кореневого елементу на фазі спливання.
Елемент та всі його відповідні об’єкти SVGElementInstance поділяють список слухачів подій. Атрибут currentTarget події може бути використано для визначення, через який об’єкт був викликаний слухач подій.
Поведінка властивості ‘visibility’ відповідає моделі наслідування властивостей. Таким чином, вказуючи 'visibility:hidden' на елементі ‘use’ не гарантує, що посилаємий вміст не буде відтворений. Якщо елемент ‘use’ вказує 'visibility:hidden' та елемент, на який він посилається, вказує 'visibility:hidden' або 'visibility:inherit', тоді цей елемент буде прихований. Однак, коли замість цього посилаємий елемент вказує 'visibility:visible', тоді цей елемент буде видимий, навіть якщо елемент ‘use’ задає 'visibility:hidden'.
Анімації на посилаємому елементі також буде викликати анімацію екземплярів.
Елемент ‘use’ має ті ж візуальні ефекти, якби елемент ‘use’ був замінений наступним згенерованим вмістом:
Для користувацьких агентів, що підтримують стилі за допомогою CSS, згенерований елемент ‘g’ захоплює "каскадовані" значення властивостей елементу ‘use’, що призводить до результатів згідно каскадів CSS ([CSS2], глава 6). Додатково, копія (глибокий клон) посиланого ресурсу захоплює "каскадовані" значення властивостей, що походять від каскадів CSS оригінального (посиланого) елементу. Таким чином, результати різних CSS селекторів, в комбінції з атрибутами ‘class’ та ‘style’, ефективно будуть замінені на функціональний еквівалент атрибуту ‘style’ в згенерованому вмсті, що передає "каскадовані" значення властивостей.
Приклад Use01 нижче має простий ‘use’ що використовує ‘rect’.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="3cm" viewBox="0 0 100 30" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Приклад Use01 - Простий випадок 'use' що використовує 'rect'</desc>
<defs>
<rect id="MyRect" width="60" height="10"/>
</defs>
<rect x=".1" y=".1" width="99.8" height="29.8"
fill="none" stroke="blue" stroke-width=".2" />
<use x="20" y="10" xlink:href="#MyRect" />
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
Візуальні ефекти будуть еквівантними до наступного документу:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="3cm" viewBox="0 0 100 30"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Приклад Use01 - Простий випадок 'use' що використовує 'rect'</desc>
<!-- 'defs' section left out -->
<rect x=".1" y=".1" width="99.8" height="29.8"
fill="none" stroke="blue" stroke-width=".2" />
<!-- Початок згенерованого вмісту. Replaces 'use' -->
<g transform="translate(20,10)">
<rect width="60" height="10"/>
</g>
<!-- Кінець згенерованого вмісту. -->
</svg>
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
Приклад Use02 нижче має ‘use’ для ‘symbol’.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="3cm" viewBox="0 0 100 30" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Приклад Use02 - 'use' on a 'symbol'</desc>
<defs>
<symbol id="MySymbol" viewBox="0 0 20 20">
<desc>MySymbol - four rectangles in a grid</desc>
<rect x="1" y="1" width="8" height="8"/>
<rect x="11" y="1" width="8" height="8"/>
<rect x="1" y="11" width="8" height="8"/>
<rect x="11" y="11" width="8" height="8"/>
</symbol>
</defs>
<rect x=".1" y=".1" width="99.8" height="29.8"
fill="none" stroke="blue" stroke-width=".2" />
<use x="45" y="10" width="10" height="10"
xlink:href="#MySymbol" />
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
Візуальні ефекти будуть еквівантними до наступного документу:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="3cm" viewBox="0 0 100 30"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Приклад Use02-GeneratedContent - 'use' on a 'symbol'</desc>
<!-- 'defs' section left out -->
<rect x=".1" y=".1" width="99.8" height="29.8"
fill="none" stroke="blue" stroke-width=".2" />
<!-- Початок згенерованого вмісту. Replaces 'use' -->
<g transform="translate(45, 10)" >
<!-- Start of referenced 'symbol'. 'symbol' replaced by 'svg',
with x,y,width,height=0,0,100%,100% -->
<svg width="10" height="10"
viewBox="0 0 20 20">
<rect x="1" y="1" width="8" height="8"/>
<rect x="11" y="1" width="8" height="8"/>
<rect x="1" y="11" width="8" height="8"/>
<rect x="11" y="11" width="8" height="8"/>
</svg>
<!-- End of referenced symbol -->
</g>
<!-- Кінець згенерованого вмісту. -->
</svg>
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
Приклад Use03 ілюструє, що трапляється, коли ‘use’ має атрибут ‘transform’.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="3cm" viewBox="0 0 100 30" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Приклад Use03 - 'use' with a 'transform' attribute</desc>
<defs>
<rect id="MyRect" x="0" y="0" width="60" height="10"/>
</defs>
<rect x=".1" y=".1" width="99.8" height="29.8"
fill="none" stroke="blue" stroke-width=".2" />
<use xlink:href="#MyRect"
transform="translate(20,2.5) rotate(10)" />
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
Візуальні ефекти будуть еквівантними до наступного документу:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="3cm" viewBox="0 0 100 30"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Приклад Use03-GeneratedContent - 'use' with a 'transform' attribute</desc>
<!-- 'defs' section left out -->
<rect x=".1" y=".1" width="99.8" height="29.8"
fill="none" stroke="blue" stroke-width=".2" />
<!-- Початок згенерованого вмісту. Replaces 'use' -->
<g transform="translate(20,2.5) rotate(10)">
<rect x="0" y="0" width="60" height="10"/>
</g>
<!-- Кінець згенерованого вмісту. -->
</svg>
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
Приклад Use04 ілюструє елемент ‘use’ з різними методами застосування стилів CSS.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="3cm" viewBox="0 0 1200 300" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Приклад Use04 - 'use' with CSS styling</desc>
<defs style=" /* rule 9 */ stroke-miterlimit: 10" >
<path id="MyPath" d="M300 50 L900 50 L900 250 L300 250"
class="MyPathClass"
style=" /* rule 10 */ stroke-dasharray:300,100" />
</defs>
<style type="text/css">
<![CDATA[
/* rule 1 */ #MyUse { fill: blue }
/* rule 2 */ #MyPath { stroke: red }
/* rule 3 */ use { fill-opacity: .5 }
/* rule 4 */ path { stroke-opacity: .5 }
/* rule 5 */ .MyUseClass { stroke-linecap: round }
/* rule 6 */ .MyPathClass { stroke-linejoin: bevel }
/* rule 7 */ use > path { shape-rendering: optimizeQuality }
/* rule 8 */ g > path { visibility: hidden }
]]>
</style>
<rect x="0" y="0" width="1200" height="300"
style="fill:none; stroke:blue; stroke-width:3"/>
<g style=" /* rule 11 */ stroke-width:40">
<use id="MyUse" xlink:href="#MyPath"
class="MyUseClass"
style="/* rule 12 */ stroke-dashoffset:50" />
</g>
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
Візуальні ефекти будуть еквівантними до наступного документу:
Дослідіть, як деякі правила стилю вище застосовуються до згенерованого вмісту (правила 1-6 та 10-12), тоді як інші (правила 7-9). Правила, що не впливають не згенерований вміст наступні:
В згенерованому вмісті нижче, селектори, що дають співпадіння, були перенесені у вбудовані атрибути ‘style’ для ілюстративних цілей.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="3cm" viewBox="0 0 1200 300"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Приклад Use04-GeneratedContent - 'use' with a 'transform' attribute</desc>
<!-- 'style' and 'defs' sections left out -->
<rect x="0" y="0" width="1200" height="300"
style="fill:none; stroke:blue; stroke-width:3"/>
<g style="/* rule 11 */ stroke-width:40">
<!-- Початок згенерованого вмісту. Replaces 'use' -->
<g style="/* rule 1 */ fill:blue;
/* rule 3 */ fill-opacity:.5;
/* rule 5 */ stroke-linecap:round;
/* rule 12 */ stroke-dashoffset:50" >
<path d="M300 50 L900 50 L900 250 L300 250"
style="/* rule 2 */ stroke:red;
/* rule 4 */ stroke-opacity:.5;
/* rule 6 */ stroke-linejoin: bevel;
/* rule 10 */ stroke-dasharray:300,100" />
</g>
<!-- Кінець згенерованого вмісту. -->
</g>
</svg>
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
Коли ‘use’ посилається на інший елемент з іншим ‘use’ або вміст містить елемент ‘use’, тоді підхід глибокого клонування, описаний вище, є рекурсивним. Однак, набір посилань, що прямо або непрямо посилається на елемент для створення циклічної залежності, є помилкою, як описано в Посилання та елемент ‘defs’.
Визначення атрибутів:
Елемент ‘image’ вказує, що вміст цілого файлу буде відтворений в наданому прямокутнику в поточній системі координат користувача. Елемент ‘image’ може посилатись на файли растрових зображень, такі як PNG або JPEG, або на файли з MIME типом "image/svg+xml". Відповідні SVG переглядачі мають підтримувати щонайменше формати файлів PNG, JPEG та SVG.
Результатом обробки ‘image’ завжди є чотириканальний формат RGBA. Коли елемент ‘image’ посилається на файл растрового зображення, таке як PNG або JPEG, що має тільки три канали (RGB), тоді ефект такий, якби об’єкт був конвертований в зображення RGBA з альфа каналом, одноманітно встановленим в 1. Для одноканальних растрових зображень,ефект такий, якби об’єкт був конвертований в зображення RGBA, де один канал з посилаємого об’єкту використовується для обчислення трьох каналів, та альфа канал одноманітно встановлений в 1.
Елемент ‘image’ встановлює нове поле перегляду для посилаємого файлу, як описано в Встановлення нового поля перегляду. Межі нового поля перегляду визначені атрибутами ‘x’, ‘y’, ‘width’ та ‘height’. Розташування та маштаб посилаємого зображення контролюються атрибутом ‘preserveAspectRatio’ елементу ‘image’.
Коли елемент ‘image’ посилається на зображення SVG, властивості ‘clip’ та ‘overflow’ кореневого елементу в посилаємому зображенні SVG ігноруються (в тій же манері, як ігноруються атрибути ‘x’, ‘y’, ‘width’ та ‘height’). За винятком випадка, коли значення ‘preserveAspectRatio’ для елементу ‘image’ починається з 'defer', атрибут ‘preserveAspectRatio’ для кореневого елементу в посилаємому зображенні SVG також ігнорується (дивіться ‘preserveAspectRatio’ щодо деталей). Заміть цього атрибут ‘preserveAspectRatio’ елементу ‘image’ визначає, як вміст зображення SVG буде підлаштовано до поля перегляду, та властивості ‘clip’ та ‘overflow’ елементу ‘image’ визначають, як вміст зображення SVG буде обрізано (або ні) відносно поля перегляду.
Значення атрибуту ‘viewBox’ використовується при обчисленні ‘preserveAspectRatio’, що визначений на посилаємому вмісті. Для вмісту, що явно ідентифікує viewBox (тобото, файл SVG з встановленим атрибутом ‘viewBox’ на найбільш зовнішньому елементі), має бути використано це значення. Для більшості растрового вмісту (PNG, JPEG) повинно використовувати межі зображення (тобто елемент ‘image’ має неявний ‘viewBox’ розміром '0 0 ширина-зображення висота-зображення'). Коли немає жодного доступного значення (тобото, файл SVG без атрибуту ‘viewBox’ для найбільш зовнішнього елементу), атрибут ‘preserveAspectRatio’ ігнорується, та для відтворення вмісту використовуєтсья тільки трансляция через атрибути ‘x’ & ‘y’ поля перегляду.
Наприклад, якщо елемент, на яке робиться посилання, є PNG або JPEG, та preserveAspectRatio="xMinYMin meet", тоді співвідношення сторін растрового зображення може бути збережене (що означає, що фактор маштабування з координат зображенняв в поточні координати користувацького простору, може бути отданковим по X та Y), растр може бути розтягнутий настільки, наскільки можливо. При цьому гарантується, що весь растр буде підлаштований до поля перегляду, та верхній/лівий кут растру будуть вирівняні з верхом/лівим кутом поля перегляду, як визначено атрибутами ‘x’, ‘y’, ‘width’ та ‘height’ елементу ‘image’. Якщо значення ‘preserveAspectRatio’ було 'none', тоді співвідношення сторін забраження може не бути збереженим. Зображення буде підлаштовано так, що верх/лівий кут растру буде точно вирівняний з координатами (‘x’, ‘y’), та нижній/правий кут растру буде точно вирівняний по координатах (‘x’+‘width’, ‘y’+‘height’).
Ресурсне посилання елементу ‘image’ представляє окремий документ, що генерує своє власне дерево розбору та об’єктну модель документу (якщо цей ресурс є XML). Таким чином, немає наслідування властивостей в зображення.
На відміну від ‘use’, елемент ‘image’ не може посилатись на елементи в файлі SVG.
Визначення атрибутів:
Дивіться ‘preserveAspectRatio’.
Якщо атрибут ‘preserveAspectRatio’ не вказано, тоді ефект такий, якщо б було вказано значення xMidYMid meet.
Анімується: так.
Приклад:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="4in" height="3in" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>This graphic links to an external image
</desc>
<image x="200" y="200" width="100px" height="100px"
xlink:href="myimage.png">
<title>My image</title>
</image>
</svg>
SVG має елемент ‘switch’, разом з атрибутами ‘requiredFeatures’, ‘requiredExtensions’ та ‘systemLanguage’, що дають змогу вказувати зміну перегляду, в залежності від можливостей окремого користувацького агента або мови користувача.
Атрибути ‘requiredFeatures’, ‘requiredExtensions’ та ‘systemLanguage’ діють як тести, та повертають або true або false. ‘switch’ відтворює перший зі своїх потомків, для якого всі атрибути повертають true. Якщо окремий атрибут не вказано, тоді передбачається значення true.
Подібно до властивості ‘display’, атрибути умовного виконання мають ефект тільки для прямого відтворення елементів, та не запобігають, щоб елементи були успішно були ціллю посилань з інших елементів (таких, як елемент ‘use’).
В результаті:
Елемент ‘switch’ обчислює атрибути ‘requiredFeatures’, ‘requiredExtensions’ та ‘systemLanguage’ для своїх прямих потомків по порядку, та потім обробляє та відтворює перший дочірній елемент, для якого атрибути обчислюються до true. Всі інші елементи будуть пропущені, і таким чином не відтворюються. Якщо дочірній елемент є контейнерний елемент, такий як ‘g’, тоді все піддерево або обробляється/відтворюється, або пропускається/не відтворюється.
Зауважте, що значення властивостей ‘display’ та ‘visibility’ не мають ефекту на обробку елементу ‘switch’. Зокрема, встановлення ‘display’ в none на потомках елементу ‘switch’ не має ефекту на перевірки true/false, асоційованих з обробкою елементу ‘switch’.
Для додаткової інформації та прикладу дивіться Вбудовування зовнішніх типів даних.
Визначення requiredFeatures:
Якщо атрибут відсутній, тоді його неявне значення є "true". Якщо атрибуту ‘requiredFeatures’ передати рядок null або пустий рядок, атрибут поверне "false".
‘requiredFeatures’ часто використовується разом з елементом ‘switch’. Якщо ‘requiredFeatures’ використовується в іншій ситуації, тоді він представляє простий перемикач на заданому елементі, що вказує, відтворювати цей елемент чи ні.
Атрибут ‘requiredExtensions’ визначає список потрібних розширень мови. Розширення мови є можливості в користувацькому агенті, що ідуть далі набору можливостей, що визначені в цій специфікації. Кожне розширення ідентифікується як IRI посилання.
Визначення requiredExtensions:
Якщо надане IRI посилання містить проміжок в собі, тоді цей проміжок має бути виключений.
Якщо атрибут відсутній, тоді його неявне значення є "true". Якщо атрибуту ‘requiredExtensions’ рядок null або пустий рядок, атрибут повертає "false".
‘requiredExtensions’ часто використовуєтся разом з елементом ‘switch’. Якщо ‘requiredExtensions’ викоритсовується в інший ситуації, тоді він представляє простий перемикач на заданому елементі, що визначає, відтворювати елемент чи ні.
Імена IRI для розширення повинні включати інформацію щодо версії, таку як "http://example.org/SVGExtensionXYZ/1.0", так що автори скриптів можуть розрізнити різні версії даного розширення.
Значення атрибуту є розділений комами список імен мов, як визначено в BCP 47 [BCP47].
Обчислюється до "true", якщо мови, вказані в перевагах користувача, точно дорівнює мовам, наданим як значення параметру, або якщо одна з мов, вказана в перевагах користувача точно дорівнює префіксу однієї з мов, наданних як значення параметру (перший символ, що іде за префіксом, є "-").
Інакше обчислюється до "false".
Зауваження: Це використання співпадіння префіксу не має на увазі, що теги мов призначені мовам таким чином, що коли користувач розуміє мову з певним тегом, він також буде розуміти всі мови, для яких цей тег є префіксом.
Правило префіксу просто дозволяє використання тегів префіксу, якщо це той випадок.
Зауваження реалізації: Коли вибір лінгвістичних уподобань доступний для користувача, реалізатори повинні приймати до уваги той факт, що користувачі не добре знайомі з деталями порівняння мов, як описано вище, та мають надавати інструкції. Як приклад, користувачі можуть вважати, що обираючи "en-gb", вони будуть обслуговувати любу категорію документів на мові English, якщо British English недоступний. Користувацький інтерфейс для встановлення користувацьких уподобань повинен допомагати користувачу додати "en", щоб отримати кращу поведінку співпадіння.
Декілька мов МОЖУТЬ бути перелічені для вмісту, що націлений для декількох аудиторій. Наприклад, вміст, що представлений одночасно на оригінальному Maori та в English версії, може бути викликаний так:
<text systemLanguage="mi, en"><!-- content goes
here --></text> Однак, тільки тому, що присутні декілька мов в об’єкті, де розташований атрибут перевірки ‘systemLanguage’, не означає, що він призначений для багатьох лінгвістичних аудиторій. Прикладом може служити текст для початківців, такий як "A First Lesson in Latin," що явно призначений для англомовної аудиторії. В цьому випадку атрибут перевірки ‘systemLanguage’ повинен включати тільки "en".
Зауваження для авторів: Автори повинні розуміти, що якщо декілька альтернативних мовних об’єктів присутні в ‘switch’, та жодний з них не співпаде, це може призвести до того, що жодний вміст не буде відображено. Тому рекомендовано включати вибір "спіймати всіх" в кінці ‘switch’, що прийнятний для всіх випадків.
Для атрибуту ‘systemLanguage’: Анімується: ні.
Якщо атрибут відсутній, отді він неявно повертає значення "true". Якщо рядок null або пустий рядок надається як значення атрибуту ‘systemLanguage’, атрибут повертає "false".
‘systemLanguage’ часто використується в поєднанні з елементом ‘switch’. Якщо ‘systemLanguage’ використовується в інших ситуаціях, тоді він представляє простий перемикач на заданому елементі, що визначає, відтворювати елемент або ні.
Наступний список описує застосовніть атрибутів перевірки до елементів, що не призводять до безпосереднього відтворення.
Документи часто посилаються та використовують вміст інших файлів (та інших Web ресурсів), як частину власного відтворення. В деяких випадках автори бажають вказати, що окремі ресурси потрібні для того, щоб документ був визнаний коректним.
Атрибут ‘externalResourcesRequired’ доступний для всіх контейнерних елементів, та для всіх елементів, що потенційно можуть посилатись на зовнішні ресурси. Він визначає, коли посилаємий ресурс, що не є частиною поточного документу, потрібен для вірного відтворення даного контейнерного елементу абографічного елементу.
Визначення атрибуту:
Цей атрибут стосується до всіх типів посилань на ресурси, включаючи листи стилів, профілі кольорів (дивіться Дескриптори профілів кольорів) та шрифти, вказані як IRI посилання з використанням елементу ‘font-face’ або специфікації CSS @font-face. Зокрема, якщо елемент встановлює externalResourcesRequired="true", тоді всі листи стилів повинні бути доступні, оскільки кожний лист стилів може впливати на відтворення елементу.
Атрибут ‘externalResourcesRequired’ не наслідується (в сенсі наслідування значень атрибутів), але якщо встановлений для контейнерного елементу, його значення буд впливати до всіх документів в контейнері.
Оскільки externalResourcesRequired="true" на контейнерному елементі буде впливати на відключення прогресивного відображення вмісту цього контейнеру, якщо цей контейнер включає елементи, що посилаються на зовнішні ресурси, інструменти, що генерують вміст SVG, застерігаються проти простого встановлення externalResourcesRequired="true"на найбільш зовнішньму елементі svg в якості загального правила. Замість цього, краще вказати externalResourcesRequired="true" для тих окремих графічних елементів або контейнерних елементів, що насправді потребують доступність зовнішних ресурсів для правильного відтворення.
Для ‘externalResourcesRequired’: Анімується: ні.
Атрибути ‘id’ та ‘xml:base’ доступні для всіх SVG елементів:
Визначення атрибутів:
Визначення атрибутів:
Коли елемент ‘svg’ вбудовується як компонент документу з іншого простору імен, як, наприклад, коли ‘svg’ елемент вбудований в документ XHTML [XHTML], тоді об’єкт SVGDocument не буде існувати; замість цього кореневий об’єкт в ієрерхій об’єктів документу буде о’бєкт Document іншого типу, такий, як об’єкт HTMLDocument.
Однак, о’бєкт SVGDocument буде дійсно існувати, коли кореневий елемент XML ієрархії документу є елемент ‘svg’, такий, як коли переглядається окремий SVG файл (тобто, файл з MIME типом "image/svg+xml"). В цьому випадку об’єкт SVGDocument буде кореневим об’єктом ієрарії обєктної моделі документу.
В випадку, коли докуент SVG вбудований по посиланню, так, як коли документ XHTML має елемент ‘object’, чий атрибут ‘href’ посилається на документ SVG (тобто, документ, чий тип MIME є "image/svg+xml", та чий кореневий елемент є елемент ‘svg’), буде існувати дві різні DOM ієрархії. Перша DOM ієрархія буде для документу, який посилається (тобто, XHTML доукмент). Друга DOM ієрархія буде для посилаємого документу SVG. В другій DOM ієрархії, кореневим в ієрархії об’єктної моделі документу буде об’єкт SVGDocument.
Інтерфейс SVGDocument містить список атрибутів та методів, подібний до інтерфейсу HTMLDocument, описаному в главі Document Object Model (HTML) Level 1 специфікації [DOM1].
Інтерфейс SVGDocument : Document, DocumentEvent { readonly attribute DOMString title; readonly attribute DOMString referrer; readonly attribute DOMString domain; readonly attribute DOMString URL; readonly attribute SVGElement rootElement; };
Ключовим визначенням елементу є інтерфейс SVGElement, що відповідає елементу ‘svg’. Цей інтерфейс містить різноманітні загально-уживані допоміжні методи, такі, як операції з матрицями, та можливість контролювати час відмалювння на візуальних пристроях відображення.
SVGElement розширює ViewCSS та DocumentCSS, щоб запровадити доступ до обчислених значень, та перекривати листи стилів, як описано в DOM Level 2 Style [DOM2STYLE].
Інтерфейс SVGElement : SVGElement, SVGTests, SVGLangSpace, SVGExternalResourcesRequired, SVGStylable, SVGLocatable, SVGFitToViewBox, SVGZoomAndPan, DocumentEvent, ViewCSS, DocumentCSS { readonly attribute SVGAnimatedLength x; readonly attribute SVGAnimatedLength y; readonly attribute SVGAnimatedLength width; readonly attribute SVGAnimatedLength height; attribute DOMString contentScriptType setraises(DOMException); attribute DOMString contentStyleType setraises(DOMException); readonly attribute SVGRect viewport; readonly attribute float pixelUnitToMillimeterX; readonly attribute float pixelUnitToMillimeterY; readonly attribute float screenPixelToMillimeterX; readonly attribute float screenPixelToMillimeterY; readonly attribute boolean useCurrentView; readonly attribute SVGViewSpec currentView; attribute float currentScale; readonly attribute SVGPoint currentTranslate; unsigned long suspendRedraw(in unsigned long maxWaitMilliseconds); void unsuspendRedraw(in unsigned long suspendHandleID); void unsuspendRedrawAll(); void forceRedraw(); void pauseAnimations(); void unpauseAnimations(); boolean animationsPaused(); float getCurrentTime(); void setCurrentTime(in float seconds); NodeList getIntersectionList(in SVGRect rect, in SVGElement referenceElement); NodeList getEnclosureList(in SVGRect rect, in SVGElement referenceElement); boolean checkIntersection(in SVGElement element, in SVGRect rect); boolean checkEnclosure(in SVGElement element, in SVGRect rect); void deselectAll(); SVGNumber createSVGNumber(); SVGLength createSVGLength(); SVGAngle createSVGAngle(); SVGPoint createSVGPoint(); SVGMatrix createSVGMatrix(); SVGRect createSVGRect(); SVGTransform createSVGTransform(); SVGTransform createSVGTransformFromMatrix(in SVGMatrix matrix); Element getElementById(in DOMString elementId); };
Положення та розмір порту перегляду (явного та явного), що відповідає цьому елементу ‘svg’. Коли користувацький агент справді відтворює вміст, тоді значення положення та розміру представляють дійсні значення прі відтворенні. Значення положення та розміру є безвимірними значеннями в системі координат батьківського елементу. Якщо батьківського елементу не існує (тобто, ‘svg’ елемент представляє корінь в дереві документу), та SVG доукмент вбудований як частина іншого документу (тобто, через елемент HTML ‘object’), тоді положення та розмір є безвимірними значеннями в координатній системі батьківського документу. (Якщо батько використовує розміщення CSS або XSL, тоді безвимірні значення предсталяють пікселькі одиниці для поточного поля перегляду CSS або XSL, як описано в специфікації CSS2). Якщо бітьківський елемент не має координатної системи, тоді користувацький агент має провадити прийнятні значення по замовчанню для ціх атрибутів.
SVGRect об’єкт тільки для читання.
Визначення початкового перегляду (тобто, перед збільшенням та панарамуванням) поточного самого внутрішнього фрагменту документу SVG. Значення залежить від ситуації:
Сам об’єкт та його вміст є тільки для читання.
Коли отримуєте доступ до елементу ‘svg’, що не є найбільш зовнішнім елементом svg, поведінка цього атрибуту є невизначеною.
Коли отримуєте доступ до елементу ‘svg’, що не є найбільш зовнішнім елементом svg, поведінка цього атрибуту є невизначеною.
В оточеннях, що не підтримують інтерактивність (тобто, друкованих медіа), перемальовування не може бути призупинено. Виклики до suspendRedraw() та unsuspendRedraw() слідує, але не обов’язково, робити в збалансованих парах.
Щоб призупинити дії перемальовок, як колекції змін в SVG DOM, попередьте зміни до SVG DOM викликом метода, на кшталт наступного:
suspendHandleID = suspendRedraw(maxWaitMilliseconds);
та після змін зробіть виклик, подібний до наступного:
unsuspendRedraw(suspendHandleID);
Зауважте, що декілька викликів suspendRedraw можуть бути використані за раз, та що кожний виклик методу трактуєтся окремо від інших викликів методу suspendRedraw.
Створює SVGTransform за межами любого дерева документа. Об’єкт ініціалізований заданою матрицею трансформації (тобто, SVG_TRANSFORM_MATRIX). Значення копіюються з параметру matrix, параметр matrix не адаптований, як SVGTransform::matrix.
Інтерфейс SVGGElement : SVGElement, SVGTests, SVGLangSpace, SVGExternalResourcesRequired, SVGStylable, SVGTransformable { };
Інтерфейс SVGDefsElement : SVGElement, SVGTests, SVGLangSpace, SVGExternalResourcesRequired, SVGStylable, SVGTransformable { };
Інтерфейс SVGDescElement : SVGElement, SVGLangSpace, SVGStylable { };
Інтерфейс SVGTitleElement : SVGElement, SVGLangSpace, SVGStylable { };
Інтерфейс SVGSymbolElement : SVGElement, SVGLangSpace, SVGExternalResourcesRequired, SVGStylable, SVGFitToViewBox { };
Інтерфейс SVGUseElement : SVGElement, SVGURIReference, SVGTests, SVGLangSpace, SVGExternalResourcesRequired, SVGStylable, SVGTransformable { readonly attribute SVGAnimatedLength x; readonly attribute SVGAnimatedLength y; readonly attribute SVGAnimatedLength width; readonly attribute SVGAnimatedLength height; readonly attribute SVGElementInstance instanceRoot; readonly attribute SVGElementInstance animatedInstanceRoot; };
Для кожного елементу ‘use’, SVG DOM підтримує тіньове дерево ("дерево екземпляру") об’єктів типу SVGElementInstance. SVGElementInstance представляє один вузол в дереві екземпляра. Кореневий об’єкт в дереві екземпляра вказує на атрибут instanceRoot об’єкту SVGUseElement для відповідного елементу ‘use’.
Якщо елемент ‘use’ посилається на простий графічний елемент, такий як ‘rect’, тоді є тільки один об’єкт SVGElementInstance, та атрибут correspondingElement на цьому об’єкті SVGElementInstance є SVGRectElement, що відповідає посилаємому елементу ‘rect’.
Якщо елемент ‘use’ посилаєтсья на ‘g’, що містить два елементи ‘rect’, тоді дерево екземпляра містить три об’єкта SVGElementInstance, кореневий об’єкт SVGElementInstance, чий correspondingElement є об’єкт SVGGElement для ‘g’, та ще два дочірніх об’єкти SVGElementInstance, кожний з яких має correspondingElement, що є о’бєктом SVGRectElement.
Якщо посилаємий об’єкт сам є ‘use’, або якщо є піделементи ‘use’ в посилаємому об’єкті, тоді дерево екземпляру містить рекурсивне розширення непрямих посилань, щоб сформувати повне дерево. Наприклад, якщо елемент ‘use’ посилаєтсья на ‘g’, та ‘g’ сам по собі містить ‘use’, та той ‘use’ посилається на ‘rect’, тоді дерево екземпляру для оригінального (зовнішнього) ‘use’ буде містити ієрархію об’єктів SVGElementInstance, наступним чином:
SVGElementInstance #1 (parentNode=null, firstChild=#2, correspondingElement is the 'g')
SVGElementInstance #2 (parentNode=#1, firstChild=#3, correspondingElement is the other 'use')
SVGElementInstance #3 (parentNode=#2, firstChild=null, correspondingElement is the 'rect')
Інтерфейс SVGElementInstance : EventTarget { readonly attribute SVGElement correspondingElement; readonly attribute SVGUseElement correspondingUseElement; readonly attribute SVGElementInstance parentNode; readonly attribute SVGElementInstanceList childNodes; readonly attribute SVGElementInstance firstChild; readonly attribute SVGElementInstance lastChild; readonly attribute SVGElementInstance previousSibling; readonly attribute SVGElementInstance nextSibling; };
Інтерфейс SVGElementInstanceList {
readonly attribute unsigned long length;
SVGElementInstance item(in unsigned long index);
};
Інтерфейс SVGImageElement : SVGElement, SVGURIReference, SVGTests, SVGLangSpace, SVGExternalResourcesRequired, SVGStylable, SVGTransformable { readonly attribute SVGAnimatedLength x; readonly attribute SVGAnimatedLength y; readonly attribute SVGAnimatedLength width; readonly attribute SVGAnimatedLength height; readonly attribute SVGAnimatedPreserveAspectRatio preserveAspectRatio; };
Інтерфейс SVGSwitchElement : SVGElement, SVGTests, SVGLangSpace, SVGExternalResourcesRequired, SVGStylable, SVGTransformable { };
Цей інтерфейс провадить доступ до документу SVG, вбудованому за посиланням в іншу, базовану на DOM, мову. Очікується, що інтерфейс реалізований на DOM об’єктах, що дозволяють такі посилання на SVG документ, такі, як об’єкт DOM Element, що відповідає елементу HTML ‘object’. Такі DOM об’єкти також часто потрібні для реалізації EmbeddingElement, визначеного в специфікації Window [WINDOW].
Цей інтерфейс знаходиться у відставці, та може бути відкинутий в
майдутніх версіях специфікації SVG. Авторам рекомендовано використовувати
атрибут contentDocumentна інтерфейсі EmbeddingElement,
щоб отримати посилаємий документ SVG, якщо цей інтерфейс доступний.
interface GetSVGDocument {
SVGDocument getSVGDocument();
};
Цей метод повинен повертати документ Document, вбудований як вміст в зовнішній елемент, або null, якщо немає такого документу.
Зауважте, що це еквівалентно отриманню значення атрибуту EmbeddingElement::contentDocument
зовнішнього документу, якщо інтерфейс EmbeddingElement
також реалізовано. Автор має перевіряти, що елемент
повернутого документу Document дійсно є елементом ‘svg’, замість припускати,
що це завжди буде саме так.
SVG uses styling properties to describe many of its document parameters. Styling properties define how the графічний елементи in the SVG content are to be rendered. SVG uses styling properties for the following:
SVG shares many of its styling properties with CSS [CSS2] and XSL [XSL]. Except for any additional SVG-specific rules explicitly mentioned in this specification, the normative definition of properties that are shared with CSS and XSL is the definition of the property from the CSS2 specification [CSS2].
following properties are shared between CSS2 and SVG. Most of these properties are also defined in XSL:
following SVG properties are not defined in CSS2. complete normative definitions for these properties are found in this specification:
A table that lists and summarizes the styling properties can be found in the Property Index.
SVG has many usage scenarios, each with different needs. Here are three common usage scenarios:
SVG content used as an exchange format (style sheet language-independent):
In some usage scenarios, reliable interoperability of SVG content across software tools is the main goal. Since support for a particular style sheet language is not guaranteed across all implementations, it is a requirement that SVG content can be fully specified without the use of a style sheet language.
SVG content generated as the output from XSLT:
XSLT offers the ability to take a stream of arbitrary XML content as input, apply potentially complex transformations, and then generate SVG content as output [XSLT]. XSLT can бути використано to transform XML data extracted from databases into an SVG graphical representation of that data. It is a requirement that fully specified SVG content can be generated from XSLT.
SVG content styled with CSS:
CSS is a widely implemented declarative language for assigning styling properties to XML content, including SVG [CSS2]. It represents a combination of features, simplicity and compactness that makes it very suitable for many applications of SVG. It is a requirement that CSS styling can be applied to SVG content.
Styling properties can be assigned to SVG elements in the following two ways:
Presentation attributes
Styling properties can be assigned using SVG's елементи презентації. For each styling property defined in this specification, there is a corresponding XML presentation attribute available on all relevant SVG elements. Detailed information on the елементи презентації can be found in Specifying properties using the елементи презентації.
елементи презентації are style sheet language independent and thus are applicable to usage scenario 1 above (тобто, tool interoperability). Because it is straightforward to assign values to XML attributes from XSLT, the елементи презентації are well-suited to usage scenario 2 above (тобто, SVG generation from XSLT). ( Дивіться Styling with XSL below.)
Conforming SVG Interpreters and Conforming SVG Viewers are required to support SVG's елементи презентації.
CSS Stylesheets
To support usage scenario 3 above, SVG content can be styled with CSS. For more information, see Styling with CSS.
Conforming SVG Interpreters and Conforming SVG Viewers that support CSS styling of generic (тобто, text-based) XML content are required to also support CSS styling of SVG content.
For each styling property defined in this specification (дивіться Property Index), there is a corresponding XML attribute (the presentation attribute) with the same name that is available on all relevant SVG elements. For example, SVG has a ‘fill’ property that defines how to paint the interior of a shape. There is a corresponding presentation attribute with the same name (тобто, ‘fill’) that can бути використано to specify a value for the ‘fill’ property on a given element.
following example shows how the ‘fill’ and ‘stroke’ properties can be specified on a ‘rect’ using the ‘fill’ and ‘stroke’ елементи презентації. rectangle will be filled with red and outlined with blue:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="10cm" height="5cm" viewBox="0 0 1000 500">
<rect x="200" y="100" width="600" height="300"
fill="red" stroke="blue" stroke-width="3"/>
</svg>
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
елементи презентації offer the following advantages:
In some situations, SVG content that uses the елементи презентації has potential limitations versus SVG content that is styled with a style sheet language such as CSS (дивіться Styling with CSS). In other situations, such as when an XSLT style sheet generates SVG content from semantically rich XML source files, the limitations below may not apply. Depending on the situation, some of the following potential limitations may or may not apply to the елементи презентації:
For користувацькі агенти that support CSS, the елементи презентації must be translated to corresponding CSS style rules according to rules described in Precedence of non-CSS presentational hints ([CSS2], section 6.4.4), with the additional clarification that the елементи презентації are conceptually inserted into a new author style sheet which is the first in the author style sheet collection. елементи презентації thus will participate in the CSS2 cascade as if they were replaced by corresponding CSS style rules placed at the start of the author style sheet with a specificity of zero. In general, this means that the елементи презентації have lower priority than other CSS style rules specified in author style sheets or ‘style’ attributes.
користувацькі агенти that do not support CSS must ignore any CSS style rules defined in CSS style sheets and ‘style’ attributes. In this case, the CSS cascade does not apply. (Inheritance of properties, however, does apply. Дивіться Property inheritance.)
An !important declaration ([CSS2], section 6.4.2) within a presentation attribute definition is an invalid value.
Animation of елементи презентації is equivalent to animating the corresponding property. Thus, the same effect occurs from animating the presentation attribute with attributeType="XML" as occurs with animating the corresponding property with attributeType="CSS" (дивіться ‘attributeType’).
XSL style sheets [XSLT] [XSLT2] define how to transform XML content into something else, usually other XML. When XSLT is used in conjunction with SVG, sometimes SVG content will serve as both input and output for XSL style sheets. Other times, XSL style sheets will take non-SVG content as input and generate SVG content as output.
following example uses an external XSL style sheet to transform SVG content into modified SVG content (дивіться Referencing external style sheets). style sheet sets the ‘fill’ and ‘stroke’ properties on all rectangles to red and blue, respectively:
mystyle.xsl
<?xml version="1.0" standalone="no"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:svg="http://www.w3.org/2000/svg">
<xsl:output
method="xml"
encoding="utf-8"
doctype-public="-//W3C//DTD SVG 1.1//EN"
doctype-system="http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"/>
<!-- Add version to topmost 'svg' element -->
<xsl:template match="/svg:svg">
<xsl:copy>
<xsl:copy-of select="@*"/>
<xsl:attribute name="version">1.1</xsl:attribute>
<xsl:apply-templates/>
</xsl:copy>
</xsl:template>
<!-- Add styling to all 'rect' elements -->
<xsl:template match="svg:rect">
<xsl:copy>
<xsl:copy-of select="@*"/>
<xsl:attribute name="fill">red</xsl:attribute>
<xsl:attribute name="stroke">blue</xsl:attribute>
<xsl:attribute name="stroke-width">3</xsl:attribute>
</xsl:copy>
</xsl:template>
</xsl:stylesheet>
SVG file to be transformed by mystyle.xsl
<?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="mystyle.xsl" type="application/xml"?>
<svg xmlns="http://www.w3.org/2000/svg"
width="10cm" height="5cm">
<rect x="2cm" y="1cm" width="6cm" height="3cm"/>
</svg>
SVG content after applying mystyle.xsl
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
width="10cm" height="5cm" version="1.1">
<rect x="2cm" y="1cm" width="6cm" height="3cm" fill="red" stroke="blue" stroke-width="3"/>
</svg>
SVG implementations that support CSS are required to support the following:
following example shows the use of an external CSS style sheet to set the ‘fill’ and ‘stroke’ properties on all rectangles to red and blue, respectively:
mystyle.css
rect {
fill: red;
stroke: blue;
stroke-width: 3
}
SVG file referencing mystyle.css
<?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="mystyle.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="10cm" height="5cm" viewBox="0 0 1000 500">
<rect x="200" y="100" width="600" height="300"/>
</svg>
Продивитись
цей приклад як SVG (потрібен переглядач з підтримкою SVG)
CSS style sheets can be embedded within SVG content inside of a ‘style’ element. following example uses an internal CSS style sheet to achieve the same result as the previous example:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="10cm" height="5cm" viewBox="0 0 1000 500">
<defs>
<style type="text/css"><![CDATA[
rect {
fill: red;
stroke: blue;
stroke-width: 3
}
]]></style>
</defs>
<rect x="200" y="100" width="600" height="300"/>
</svg>
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
Note how the CSS style sheet is placed within a CDATA
construct (тобто, <![CDATA[ ... ]]>). Placing
internal CSS style sheets within CDATA blocks is sometimes
necessary since CSS style sheets can include characters, such as ">",
which conflict with XML parsers. Even if a given style sheet does not
use characters that conflict with XML parsing, it is highly recommended
that internal style sheets be placed inside CDATA blocks.
Implementations that support CSS are also required to support CSS inline style. Similar to the ‘style’ attribute in HTML, CSS inline style can be declared within a ‘style’ attribute in SVG by specifying a semicolon-separated list of property declarations, where each property declaration has the form "name: value". Note that property declarations inside the ‘style’ attribute must follow CSS style rules, see 'style' attribute.
following example shows how the ‘fill’ and ‘stroke’ properties can be specified on a ‘rect’ using the ‘style’ attribute. Just like the previous example, the rectangle will be filled with red and outlined with blue:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="10cm" height="5cm" viewBox="0 0 1000 500">
<rect x="200" y="100" width="600" height="300"
style="fill: red; stroke: blue; stroke-width: 3"/>
</svg>
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
In an SVG користувацький агент that supports CSS style sheets, the following facilities from CSS2 must be supported:
SVG defines an @color-profile at-rule ([CSS2], section 4.1.6) for defining color profiles so that ICC color profiles can be applied to CSS-styled SVG content.
Note the following about relative URIs and external CSS style sheets: CSS2 specification says ([CSS2], section 4.3.4) that relative URIs (as defined in Uniform Resource Identifiers (URI): Generic Syntax [RFC3986]) within style sheets are resolved such that the base URI is that of the style sheet, not that of the referencing document.
Property declarations via елементи презентації are expressed in XML [XML10], which is case-sensitive. CSS property declarations specified either in CSS style sheets or in a ‘style’ attribute, on the other hand, are generally case-insensitive with some exceptions ([CSS2], section 4.1.3).
Because елементи презентації are expressed as XML attributes, елементи
презентації are case-sensitive and must match the exact name as
specified in the DTD (дивіться the SVG.Presentation.attrib
entity in the DTD, which expands to all of the елементи презентації).
When using a presentation attribute to specify a value for the ‘fill’ property, the presentation
attribute must be be specified as fill="…"
and not fill="…" or Fill="…".
Keyword values, such as italic in font-style="italic", are also case-sensitive
and must be specified using the exact case used in the specification
which defines the given keyword. For example, the keyword sRGB
must have lowercase "s" and uppercase "RGB".
Property declarations within CSS style sheets or in a ‘style’ attribute must only conform to CSS rules, which are generally more lenient with regard to case sensitivity. Однак, to promote consistency across the different ways for expressing styling properties, it is strongly recommended that authors use the exact property names (usually, lowercase letters and hyphens) as defined in the relevant specification and express all keywords using the same case as is required by елементи презентації and not take advantage of CSS's ability to ignore case.
SVG shares various relevant properties and approaches common to CSS and XSL, plus the semantics of many of the processing rules.
SVG shares the following facilities with CSS and XSL:
External style sheets are referenced using the mechanism documented in Associating Style Sheets with XML documents Version 1.0 [XML-SS].
‘style’ element allows style sheets to be embedded directly within SVG content. SVG's ‘style’ element has the same attributes as the corresponding element in HTML (дивіться HTML's ‘style’ element).
Визначення атрибутів:
syntax of style data depends on the style sheet language.
Some style sheet languages might allow a wider variety of rules in the ‘style’ element than in the ‘style’. For example, with CSS, rules can be declared within a ‘style’ element that cannot be declared within a ‘style’ attribute.
An example showing the ‘style’ element is provided above (дивіться example).
Визначення атрибутів:
‘class’ attribute assigns one or more class names to an element. element may be said to belong to these classes. A class name may be shared by several element instances. ‘class’ attribute has several roles:
In the following example, the ‘text’ element is used in conjunction with the ‘class’ attribute to markup document messages. Messages appear in both English and French versions.
<!-- English messages --> <text class="info" lang="en">Variable declared twice</text> <text class="warning" lang="en">Undeclared variable</text> <text class="error" lang="en">Bad syntax for variable name</text> <!-- French messages --> <text class="info" lang="fr">Variable déclarée deux fois</text> <text class="warning" lang="fr">Variable indéfinie</text> <text class="error" lang="fr">Erreur de syntaxe pour variable</text>
In an SVG користувацький агент that supports CSS styling, the following CSS style rules would tell visual користувацькі агенти to display informational messages in green, warning messages in yellow, and error messages in red:
text.info { color: green }
text.warning { color: yellow }
text.error { color: red }
‘style’ attribute allows per-element style rules to be specified directly on a given element. When CSS styling is used, CSS inline style is specified by including semicolon-separated property declarations of the form "name : value" within the ‘style’ attribute. Property declarations must follow CSS style rules thus CSS defined properties (e.g. 'font-size') when having a <length> value must include a unit (for non-zero values). Дивіться SVG's styling properties for a list of CSS defined properties.
Визначення атрибутів:
style attribute may бути використано to apply a particular style to an individual SVG element. Якщо the style will be reused for several elements, authors should use the ‘style’ element to regroup that information. For optimal flexibility, authors should define styles in external style sheets.
An example showing the ‘style’ attribute is provided above (дивіться example).
‘contentStyleType’ attribute on the ‘svg’ element specifies the default style sheet language for the given фрагмент документу.
Since the only widely deployed language used for inline styling (in style elements and style attributes) is CSS, and since that is already the default language if contentStyleType is omitted, in practice contentStyleType is not well supported in користувацькі агенти. XSL style sheets are typically external. Якщо a new style sheet language becomes popular, it might not use style attributes and could easily declare which language is in use with the type attribute on the style element.
use of contentStyleType is therefore deprecated; new content should not use it. Future versions of the SVG specification may remove contentStyleType.
Whether or not the користувацький агент supports CSS, property inheritance in SVG follows the property inheritance rules defined in the CSS2 specification. normative definition for property inheritance is the Inheritance section of the CSS2 specification ([CSS2], section 6.2).
definition of each property indicates whether the property can inherit the значення its parent.
In SVG, as in CSS2, most elements inherit computed values ([CSS2], section 6.1.2). For cases where something other than computed values are inherited, the property definition will describe the inheritance rules. For specified values ([CSS2], section 6.1.1) which are expressed in user units, in pixels (тобто, 20px) or in absolute values, the computed value equals the specified value. For specified values which use certain relative units (тобто, em, ex and percentages), the computed value will have the same units as the value to which it is relative. Thus, if the parent element has a ‘font-size’ of 10pt and the current element has a ‘font-size’ of 120%, then the computed value for ‘font-size’ on the current element will be 12pt. In cases where the referenced value for relative units is not expressed in any of the standard SVG units (тобто, CSS units or user units), such as when a percentage is used relative to the current viewport or an object bounding box, then the computed value will be in user units.
Note that SVG has some facilities wherein a property which is specified on an ancestor element might effect its descendant element, even if the descendant element has a different assigned value for that property. For example, if a ‘clip-path’ property is specified on an ancestor element, and the current element has a ‘clip-path’ of none, the ancestor's clipping path still applies to the current element because the semantics of SVG state that the clipping path used on a given element is the intersection of all clipping paths specified on itself and all ancestor elements. key concept is that property assignment (with possible property inheritance) happens first. After properties values have been assigned to the various elements, then the користувацький агент applies the semantics of each assigned property, which might result in the property assignment of an ancestor element affecting the rendering of its descendants.
following define the scope/range of style sheets:
користувацький агент shall maintain a користувацький агент style sheet ([CSS2], section 6.4) for elements in the SVG namespace for visual media ([CSS2], section 7.3.1). користувацький агент style sheet below is expressed using CSS syntax; however, користувацькі агенти are required to support the behavior that corresponds to this default style sheet even if CSS style sheets are not supported in the користувацький агент:
svg, symbol, image, marker, pattern, foreignObject { overflow: hidden }
svg { width:attr(width); height:attr(height) }
first line of the above користувацький агент style sheet will cause the initial clipping path to be established at the bounds of the initial viewport. Furthermore, it will cause new clipping paths to be established at the bounds of the listed elements, all of which are elements that establish a new viewport. (Refer to the description of SVG's use of the ‘overflow’ property for more information.)
second line of the above користувацький агент style sheet will cause the ‘width’ and ‘height’ attributes on the ‘svg’ element to бути використано as the default values for the 'width' and 'height' properties during layout ([CSS2], chapter 9).
For the purposes of aural media, SVG represents a stylable XML grammar. In користувацькі агенти that support CSS aural style sheets, aural style properties ([CSS2], chapter 19) can be applied as defined in CSS2.
Aural style properties can be applied to any SVG element that can contain character data content, including ‘desc’ ‘title’ ‘tspan’, ‘tref’, ‘altGlyph’ and ‘textPath’. On користувацькі агенти that support aural style sheets, the following CSS2 properties can be applied:
| Aural property | Definition in [CSS2] |
|---|---|
| ‘azimuth’ | Section 19.7 |
| ‘cue’ | Section 19.5 |
| ‘cue-after’ | Section 19.5 |
| ‘cue-before’ | Section 19.5 |
| ‘elevation’ | Section 19.7 |
| ‘pause’ | Section 19.4 |
| ‘pause-after’ | Section 19.4 |
| ‘pause-before’ | Section 19.4 |
| ‘pitch’ | Section 19.8 |
| ‘pitch-range’ | Section 19.8 |
| ‘play-during’ | Section 19.6 |
| ‘richness’ | Section 19.8 |
| ‘speak’ | Section 19.3 |
| ‘speak-header’ | Section 17.7.1 |
| ‘speak-numeral’ | Section 19.9 |
| ‘speak-punctuation’ | Section 19.9 |
| ‘speech-rate’ | Section 19.8 |
| ‘stress’ | Section 19.8 |
| ‘voice-family’ | Section 19.8 |
| ‘volume’ | Section 19.2 |
For користувацькі агенти that support aural style sheets and also support DOM Level 2 Core [DOM2], the користувацький агент is required to support the DOM interfaces defined in Document Object Model CSS ([DOM2STYLE], chapter 2) that correspond to aural properties. ( Дивіться Relationship with DOM2 CSS object model.)
Інтерфейс SVGStyleElement : SVGElement, SVGLangSpace { attribute DOMString type setraises(DOMException); attribute DOMString media setraises(DOMException); attribute DOMString title setraises(DOMException); };
For all media, the SVG canvas описує "the space where the SVG content is rendered." canvas is infinite for each dimension of the space, but rendering occurs relative to a finite rectangular region of the canvas. This finite rectangular region is called the SVG viewport. For visual media ([CSS2], section 7.3.1) the SVG viewport is the viewing area where the user sees the SVG content.
size of the SVG viewport (тобто, its width and height) is determined by a negotiation process (дивіться Establishing the size of the initial viewport) between the фрагменту документу SVG and its parent (real or implicit). Once that negotiation process is completed, the SVG користувацький агент is provided the following information:
Using the above information, the SVG користувацький агент determines the viewport, an initial viewport coordinate system and an initial user coordinate system such that the two coordinates systems are identical. Both coordinates systems are established such that the origin matches the origin of the viewport (for the root viewport, the viewport origin is at the top/left corner), and one unit in the початкова координатна система equals one "pixel" in the viewport. ( Дивіться Initial coordinate system.) viewport coordinate system is also called viewport space and the user coordinate system is also called user space.
Lengths in SVG can be specified as:
supported length unit identifiers are: em, ex, px, pt, pc, cm, mm, in, and percentages.
A new user space (тобто, a new current coordinate system) can be established at any place within an фрагменту документу SVG by specifying transformations in the form of transformation matrices or simple transformation operations such as rotation, skewing, scaling and translation. Establishing new user spaces via coordinate system transformations are fundamental operations to 2D graphics and represent the usual method of controlling the size, position, rotation and skew of graphic objects.
New viewports also can be established. By establishing a new viewport, you can redefine the meaning of percentages units and provide a new reference rectangle for "fitting" a graphic into a particular rectangular area. ("Fit" means that a given graphic is transformed in such a way that its bounding box in user space aligns exactly with the edges of a given viewport.)
SVG користувацький агент negotiates with its parent користувацький агент to determine the viewport into which the SVG користувацький агент can render the document. In some circumstances, SVG content will be embedded (by reference or inline) within a containing document. This containing document might include attributes, properties and/or other parameters (explicit or implicit) which specify or provide hints about the dimensions of the viewport for the SVG content. SVG content itself optionally can provide information about the appropriate viewport region for the content via the ‘width’ and ‘height’ XML attributes on the outermost svg element. negotiation process uses any information provided by the containing document and the SVG content itself to choose the viewport location and size.
‘width’ attribute on the outermost svg element establishes the viewport's width, unless the following conditions are met:
Under these conditions, the positioning properties establish the viewport's width.
Similarly, if there are positioning properties specified on the referencing element or on the outermost svg element that are sufficient to establish the height of the viewport, then these positioning properties establish the viewport's height; otherwise, the ‘height’ attribute on the outermost svg element establishes the viewport's height.
Якщо the ‘width’ or ‘height’ attributes on the outermost svg element are in user units (тобто, no unit identifier has been provided), then the value is assumed to be equivalent to the same number of "px" units (дивіться Units).
In the following example, an SVG graphic is embedded inline within a parent XML document which is formatted using CSS layout rules. Since CSS positioning properties are not provided on the outermost svg element, the width="100px" and height="200px" attributes determine the size of the initial viewport:
<?xml version="1.0" standalone="yes"?>
<parent xmlns="http://some.url">
<!-- SVG graphic -->
<svg xmlns='http://www.w3.org/2000/svg'
width="100px" height="200px" version="1.1">
<path d="M100,100 Q200,400,300,100"/>
<!-- rest of SVG graphic would go here -->
</svg>
</parent>
initial clipping path for the фрагменту документу SVG is established according to the rules described in initial clipping path.
For the outermost svg element, the SVG користувацький агент determines an initial viewport coordinate system and an initial user coordinate system such that the two coordinates systems are identical. origin of both coordinate systems is at the origin of the viewport, and one unit in the початкова координатна система equals one "pixel" (тобто, a px unit as defined in CSS2 ([CSS2], section 4.3.2) in the viewport. In most cases, such as stand-alone SVG documents or фрагменту документу SVGs embedded (by reference or inline) within XML parent documents where the parent's layout is determined by CSS [CSS2] or XSL [XSL], the initial viewport coordinate system (and therefore the initial user coordinate system) has its origin at the top/left of the viewport, with the positive x-axis pointing towards the right, the positive y-axis pointing down, and text rendered with an "upright" orientation, which means glyphs are oriented such that Roman characters and full-size ideographic characters for Asian scripts have the top edge of the corresponding glyphs oriented upwards and the right edge of the corresponding glyphs oriented to the right.
Якщо the SVG implementation is part of a користувацький агент which supports styling XML documents using CSS2 compatible px units, then the SVG користувацький агент should get its initial value for the size of a px unit in real world units to match the value used for other XML styling operations; otherwise, if the користувацький агент can determine the size of a px unit from its environment, it should use that value; otherwise, it should choose an appropriate size for one px unit. In all cases, the size of a px must be in conformance with the rules described in CSS2 ([CSS2], section 4.3.2).
Приклад InitialCoords below shows that the початкова координатна система has the origin at the top/left with the x-axis pointing to the right and the y-axis pointing down. initial user coordinate system has one user unit equal to the parent (implicit or explicit) користувацький агент's "pixel".
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300px" height="100px" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<desc>Приклад InitialCoords - SVG's початкова координатна система</desc>
<g fill="none" stroke="black" stroke-width="3" >
<line x1="0" y1="1.5" x2="300" y2="1.5" />
<line x1="1.5" y1="0" x2="1.5" y2="100" />
</g>
<g fill="red" stroke="none" >
<rect x="0" y="0" width="3" height="3" />
<rect x="297" y="0" width="3" height="3" />
<rect x="0" y="97" width="3" height="3" />
</g>
<g font-size="14" font-family="Verdana" >
<text x="10" y="20">(0,0)</text>
<text x="240" y="20">(300,0)</text>
<text x="10" y="90">(0,100)</text>
</g>
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
A new user space (тобто, a new current coordinate system) can be established by specifying transformations in the form of a ‘transform’ attribute on a контейнерний елемент or графічний елемент or a ‘viewBox’ attribute on an ‘svg’, ‘symbol’, ‘marker’, ‘pattern’ and the ‘view’ element. ‘transform’ and ‘viewBox’ attributes transform user space coordinates and lengths on sibling attributes on the given element (дивіться effect of the ‘transform’ attribute on sibling attributes and effect of the ‘viewBox’ attribute on sibling attributes) and all of its descendants. Transformations can be nested, in which caseефект of the transformations are cumulative.
Приклад OrigCoordSys below shows a document without transformations. text string is specified in the початкова координатна система.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="400px" height="150px"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Приклад OrigCoordSys - Simple transformations: original picture</desc>
<g fill="none" stroke="black" stroke-width="3" >
<!-- Draw the axes of the original coordinate system -->
<line x1="0" y1="1.5" x2="400" y2="1.5" />
<line x1="1.5" y1="0" x2="1.5" y2="150" />
</g>
<g>
<text x="30" y="30" font-size="20" font-family="Verdana" >
ABC (orig coord system)
</text>
</g>
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
Приклад NewCoordSys establishes a new user coordinate system by specifying transform="translate(50,50)" on the third ‘g’ element below. new user coordinate system has its origin at location (50,50) in the original coordinate system. result of this transformation is that the coordinate (30,30) in the new user coordinate system gets mapped to coordinate (80,80) in the original coordinate system (тобто, the coordinates have been translated by 50 units in X and 50 units in Y).
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="400px" height="150px"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Приклад NewCoordSys - New user coordinate system</desc>
<g fill="none" stroke="black" stroke-width="3" >
<!-- Draw the axes of the original coordinate system -->
<line x1="0" y1="1.5" x2="400" y2="1.5" />
<line x1="1.5" y1="0" x2="1.5" y2="150" />
</g>
<g>
<text x="30" y="30" font-size="20" font-family="Verdana" >
ABC (orig coord system)
</text>
</g>
<!-- Establish a new coordinate system, which is
shifted (тобто, translated) from the початкова координатна система by 50 user units along each axis. -->
<g transform="translate(50,50)">
<g fill="none" stroke="red" stroke-width="3" >
<!-- Draw lines of length 50 user units along
the axes of the new coordinate system -->
<line x1="0" y1="0" x2="50" y2="0" stroke="red" />
<line x1="0" y1="0" x2="0" y2="50" />
</g>
<text x="30" y="30" font-size="20" font-family="Verdana" >
ABC (translated coord system)
</text>
</g>
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
Приклад RotateScale illustrates simple rotate and scale transformations. example defines two new coordinate systems:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="400px" height="120px" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<desc>Приклад RotateScale - Rotate and scale transforms</desc>
<g fill="none" stroke="black" stroke-width="3" >
<!-- Draw the axes of the original coordinate system -->
<line x1="0" y1="1.5" x2="400" y2="1.5" />
<line x1="1.5" y1="0" x2="1.5" y2="120" />
</g>
<!-- Establish a new coordinate system whose origin is at (50,30)
in the initial coord. system and which is rotated by 30 degrees. -->
<g transform="translate(50,30)">
<g transform="rotate(30)">
<g fill="none" stroke="red" stroke-width="3" >
<line x1="0" y1="0" x2="50" y2="0" />
<line x1="0" y1="0" x2="0" y2="50" />
</g>
<text x="0" y="0" font-size="20" font-family="Verdana" fill="blue" >
ABC (rotate)
</text>
</g>
</g>
<!-- Establish a new coordinate system whose origin is at (200,40)
in the initial coord. system and which is scaled by 1.5. -->
<g transform="translate(200,40)">
<g transform="scale(1.5)">
<g fill="none" stroke="red" stroke-width="3" >
<line x1="0" y1="0" x2="50" y2="0" />
<line x1="0" y1="0" x2="0" y2="50" />
</g>
<text x="0" y="0" font-size="20" font-family="Verdana" fill="blue" >
ABC (scale)
</text>
</g>
</g>
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
Приклад Skew defines two coordinate systems which are skewed relative to the origin coordinate system.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="400px" height="120px" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<desc>Приклад Skew - Show effects of skewX and skewY</desc>
<g fill="none" stroke="black" stroke-width="3" >
<!-- Draw the axes of the original coordinate system -->
<line x1="0" y1="1.5" x2="400" y2="1.5" />
<line x1="1.5" y1="0" x2="1.5" y2="120" />
</g>
<!-- Establish a new coordinate system whose origin is at (30,30)
in the initial coord. system and which is skewed in X by 30 degrees. -->
<g transform="translate(30,30)">
<g transform="skewX(30)">
<g fill="none" stroke="red" stroke-width="3" >
<line x1="0" y1="0" x2="50" y2="0" />
<line x1="0" y1="0" x2="0" y2="50" />
</g>
<text x="0" y="0" font-size="20" font-family="Verdana" fill="blue" >
ABC (skewX)
</text>
</g>
</g>
<!-- Establish a new coordinate system whose origin is at (200,30)
in the initial coord. system and which is skewed in Y by 30 degrees. -->
<g transform="translate(200,30)">
<g transform="skewY(30)">
<g fill="none" stroke="red" stroke-width="3" >
<line x1="0" y1="0" x2="50" y2="0" />
<line x1="0" y1="0" x2="0" y2="50" />
</g>
<text x="0" y="0" font-size="20" font-family="Verdana" fill="blue" >
ABC (skewY)
</text>
</g>
</g>
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
Mathematically, all transformations
can be represented as 3x3 transformation
matrices of the following form:

Since only six values are used in the above 3x3 matrix, a transformation matrix is also expressed as a vector: [a b c d e f].
Transformations map coordinates and lengths from a new coordinate
system into a previous coordinate system:

Simple transformations are represented in matrix form as follows:





Transformations can be nested to any level. effect of nested
transformations is to post-multiply (тобто, concatenate) the subsequent
transformation matrices onto previously defined transformations:

For each given element, the accumulation of all transformations that
have been defined on the given element and all of its ancestors up to
and including the element that established the current viewport
(usually, the ‘svg’
element which is the most immediate ancestor to the given element) is
called the current transformation matrix
or CTM. CTM thus represents the mapping
of current user coordinates to viewport coordinates:

Приклад Nested illustrates nested transformations.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="400px" height="150px" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<desc>Приклад Nested - Nested transformations</desc>
<g fill="none" stroke="black" stroke-width="3" >
<!-- Draw the axes of the original coordinate system -->
<line x1="0" y1="1.5" x2="400" y2="1.5" />
<line x1="1.5" y1="0" x2="1.5" y2="150" />
</g>
<!-- First, a translate -->
<g transform="translate(50,90)">
<g fill="none" stroke="red" stroke-width="3" >
<line x1="0" y1="0" x2="50" y2="0" />
<line x1="0" y1="0" x2="0" y2="50" />
</g>
<text x="0" y="0" font-size="16" font-family="Verdana" >
....Translate(1)
</text>
<!-- Second, a rotate -->
<g transform="rotate(-45)">
<g fill="none" stroke="green" stroke-width="3" >
<line x1="0" y1="0" x2="50" y2="0" />
<line x1="0" y1="0" x2="0" y2="50" />
</g>
<text x="0" y="0" font-size="16" font-family="Verdana" >
....Rotate(2)
</text>
<!-- Third, another translate -->
<g transform="translate(130,160)">
<g fill="none" stroke="blue" stroke-width="3" >
<line x1="0" y1="0" x2="50" y2="0" />
<line x1="0" y1="0" x2="0" y2="50" />
</g>
<text x="0" y="0" font-size="16" font-family="Verdana" >
....Translate(3)
</text>
</g>
</g>
</g>
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
In the example above, the CTM within the third nested transformation
(тобто, the transform="translate(130,160)")
consists of the concatenation of the three transformations, as follows:

значення the ‘transform’ attribute is a <transform-list>, which is defined as a list of transform definitions, which are applied in the order provided. individual transform definitions are separated by whitespace and/or a comma. available types of transform definitions include:
All numeric values are <number>s.
Якщо a list of transforms is provided, then the net effect is as if each transform had been specified separately in the order provided. For example,
<g transform="translate(-10,-20) scale(2) rotate(45) translate(5,10)"> <!-- графічний елементи go here --> </g>
is functionally equivalent to:
<g transform="translate(-10,-20)">
<g transform="scale(2)">
<g transform="rotate(45)">
<g transform="translate(5,10)">
<!-- графічний елементи go here -->
</g>
</g>
</g>
</g>
‘transform’ attribute is applied to an element before processing any other coordinate or length values supplied for that element. In the element
<rect x="10" y="10" width="20" height="20" transform="scale(2)"/>
the x, y, width and height values are processed after the current coordinate system has been scaled uniformly by a factor of 2 by the ‘transform’ attribute. Attributes x, y, width and height (and any other attributes or properties) are treated as values in the new user coordinate system, not the previous user coordinate system. Thus, the above ‘rect’ element is functionally equivalent to:
<g transform="scale(2)"> <rect x="10" y="10" width="20" height="20"/> </g>
following is the Backus-Naur Form (BNF) for values for the ‘transform’ attribute. following notation is used:
transform-list:
wsp* transforms? wsp*
transforms:
transform
| transform comma-wsp+ transforms
transform:
matrix
| translate
| scale
| rotate
| skewX
| skewY
matrix:
"matrix" wsp* "(" wsp*
number comma-wsp
number comma-wsp
number comma-wsp
number comma-wsp
number comma-wsp
number wsp* ")"
translate:
"translate" wsp* "(" wsp* number ( comma-wsp number )? wsp* ")"
scale:
"scale" wsp* "(" wsp* number ( comma-wsp number )? wsp* ")"
rotate:
"rotate" wsp* "(" wsp* number ( comma-wsp number comma-wsp number )? wsp* ")"
skewX:
"skewX" wsp* "(" wsp* number wsp* ")"
skewY:
"skewY" wsp* "(" wsp* number wsp* ")"
number:
sign? integer-constant
| sign? floating-point-constant
comma-wsp:
(wsp+ comma? wsp*) | (comma wsp*)
comma:
","
integer-constant:
digit-sequence
floating-point-constant:
fractional-constant exponent?
| digit-sequence exponent
fractional-constant:
digit-sequence? "." digit-sequence
| digit-sequence "."
exponent:
( "e" | "E" ) sign? digit-sequence
sign:
"+" | "-"
digit-sequence:
digit
| digit digit-sequence
digit:
"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"
wsp:
(#x20 | #x9 | #xD | #xA)
For the ‘transform’ attribute:
Анімується: так.
Дивіться the ‘animateTransform’ element for information on animating transformations.
It is often desirable to specify that a given set of graphics stretch to fit a particular контейнерний елемент. ‘viewBox’ attribute provides this capability.
All elements that establish a new viewport (дивіться elements that establish viewports), plus the ‘marker’, ‘pattern’ and ‘view’ elements have attribute ‘viewBox’. значення the ‘viewBox’ attribute is a list of four numbers <min-x>, <min-y>, <width> and <height>, separated by whitespace and/or a comma, which specify a rectangle in user space which should be mapped to the bounds of the viewport established by the given element, taking into account attribute ‘preserveAspectRatio’. Якщо specified, an additional transformation is applied to all descendants of the given element to achieve the specified effect.
A negative value for <width> or <height> is an error (дивіться Обробка помилок). A значення zero disables rendering елементу.
Приклад ViewBox illustrates the use of the ‘viewBox’ attribute on the outermost svg element to specify that the SVG content should stretch to fit bounds of the viewport.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300px" height="200px" version="1.1"
viewBox="0 0 1500 1000" preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg">
<desc>Приклад ViewBox - uses the viewBox
attribute to automatically create an initial user coordinate
system which causes the graphic to scale to fit into the
viewport no matter what size the viewport is.</desc>
<!-- This rectangle goes from (0,0) to (1500,1000) in user space.
Because of the viewBox attribute above,
the rectangle will end up filling the entire area
reserved for the SVG content. -->
<rect x="0" y="0" width="1500" height="1000"
fill="yellow" stroke="blue" stroke-width="12" />
<!-- A large, red triangle -->
<path fill="red" d="M 750,100 L 250,900 L 1250,900 z"/>
<!-- A text string that spans most of the viewport -->
<text x="100" y="600" font-size="200" font-family="Verdana" >
Stretch to fit
</text>
</svg>
| Rendered into viewport with width=300px, height=200px |
Rendered into viewport with width=150px, height=200px |
|
|---|---|---|
![]() |
![]() |
Продивитись цей
приклад як SVG (потрібен переглядач з підтримкою SVG)
effect of the ‘viewBox’ attribute is that the користувацький агент automatically supplies the appropriate transformation matrix to map the specified rectangle in user space to the bounds of a designated region (often, the viewport). To achieveефект of the example on the left, with viewport dimensions of 300 by 200 pixels, the користувацький агент needs to automatically insert a transformation which scales both X and Y by 0.2. effect is equivalent to having a viewport of size 300px by 200px and the following supplemental transformation in the document, as follows:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300px" height="200px" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<g transform="scale(0.2)">
<!-- Rest of document goes here -->
</g>
</svg>
To achieveефект of the example on the right, with viewport dimensions of
150 by 200 pixels, the користувацький агент needs to automatically insert
a transformation which scales X by 0.1 and Y by 0.2. effect is equivalent
to having a viewport of size 150px by 200px and the following supplemental
transformation in the document, as follows:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="150px" height="200px" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<g transform="scale(0.1 0.2)">
<!-- Rest of document goes here -->
</g>
</svg>
(Note: in some cases the користувацький агент will need to supply a translate transformation in addition to a scale transformation. For example, on an outermost svg element, a translate transformation will be needed if the ‘viewBox’ attributes specifies values other than zero for <min-x> or <min-y>.)
Unlike the ‘transform’ attribute (дивіться effect of the ‘transform’ on sibling attributes), the automatic transformation that is created due to a ‘viewBox’ does not affect the ‘x’, ‘y’, ‘width’ and ‘height’ attributes (or in the case of the ‘marker’ element, the ‘markerWidth’ and ‘markerHeight’ attributes) on the element with the ‘viewBox’ attribute. Thus, in the example above which shows an ‘svg’ element which has attributes ‘width’, ‘height’ and ‘viewBox’, the ‘width’ and ‘height’ attributes represent values in the coordinate system that exists before the ‘viewBox’ transformation is applied. On the other hand, like the ‘transform’ attribute, it does establish a new coordinate system for all other attributes and for descendant elements.
For the ‘viewBox’ attribute:
Анімується: так.
In some cases, typically when using the ‘viewBox’ attribute, it is desirable that the graphics stretch to fit non-uniformly to take up the entire viewport. In other cases, it is desirable that uniform scaling бути використано for the purposes of preserving the aspect ratio of the graphics.
Attribute preserveAspectRatio="[defer] <align> [<meetOrSlice>]", which is available for all elements that establish a new viewport (дивіться elements that establish viewports), plus the ‘image’, ‘marker’, ‘pattern’ and ‘view’ elements, indicates whether or not to force uniform scaling.
For elements that establish a new viewport (дивіться elements that establish viewports), plus the ‘marker’, ‘pattern’ and ‘view’ elements, ‘preserveAspectRatio’ only applies when a value has been provided for ‘viewBox’ on the same element. For these elements, if attribute ‘viewBox’ is not provided, then ‘preserveAspectRatio’ is ignored.
For ‘image’ elements, ‘preserveAspectRatio’ indicates how referenced images should be fitted with respect to the reference rectangle and whether the aspect ratio of the referenced image should be preserved with respect to the current user coordinate system.
Якщо the значення ‘preserveAspectRatio’ on an ‘image’ element starts with 'defer' then the значення the ‘preserveAspectRatio’ attribute on the referenced content if present should бути використано. Якщо the referenced content lacks a value for ‘preserveAspectRatio’ then the ‘preserveAspectRatio’ attribute should be processed as normal (ignoring 'defer'). For ‘preserveAspectRatio’ on all other elements the 'defer' portion of the attribute is ignored.
<align> parameter indicates whether to force uniform scaling and, if so, the alignment method to use in case the aspect ratio of the ‘viewBox’ doesn't match the aspect ratio of the viewport. <align> parameter must be one of the following strings:
<meetOrSlice> parameter is optional and, if provided, is separated from the <align> value by one or more spaces and then must be one of the following strings:
Приклад PreserveAspectRatio illustrates the various options on ‘preserveAspectRatio’. To save space, XML entities have been defined for the three repeated graphic objects, the rectangle with the smile inside and the outlines of the two rectangles which have the same dimensions as the target viewports. example creates several new viewports by including ‘svg’ sub-elements embedded inside the outermost svg element (дивіться Establishing a new viewport).
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
[ <!ENTITY Smile "
<rect x='.5' y='.5' width='29' height='39' fill='black' stroke='red'/>
<g transform='translate(0, 5)'>
<circle cx='15' cy='15' r='10' fill='yellow'/>
<circle cx='12' cy='12' r='1.5' fill='black'/>
<circle cx='17' cy='12' r='1.5' fill='black'/>
<path d='M 10 19 A 8 8 0 0 0 20 19' stroke='black' stroke-width='2'/>
</g>
">
<!ENTITY Viewport1 "<rect x='.5' y='.5' width='49' height='29'
fill='none' stroke='blue'/>">
<!ENTITY Viewport2 "<rect x='.5' y='.5' width='29' height='59'
fill='none' stroke='blue'/>">
]>
<svg width="450px" height="300px" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<desc>Приклад PreserveAspectRatio - illustrates preserveAspectRatio attribute</desc>
<rect x="1" y="1" width="448" height="298"
fill="none" stroke="blue"/>
<g font-size="9">
<text x="10" y="30">SVG to fit</text>
<g transform="translate(20,40)">&Smile;</g>
<text x="10" y="110">Viewport 1</text>
<g transform="translate(10,120)">&Viewport1;</g>
<text x="10" y="180">Viewport 2</text>
<g transform="translate(20,190)">&Viewport2;</g>
<g id="meet-group-1" transform="translate(100, 60)">
<text x="0" y="-30">--------------- meet ---------------</text>
<g><text y="-10">xMin*</text>&Viewport1;
<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 30 40"
width="50" height="30">&Smile;</svg></g>
<g transform="translate(70,0)"><text y="-10">xMid*</text>&Viewport1;
<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 40"
width="50" height="30">&Smile;</svg></g>
<g transform="translate(0,70)"><text y="-10">xMax*</text>&Viewport1;
<svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 30 40"
width="50" height="30">&Smile;</svg></g>
</g>
<g id="meet-group-2" transform="translate(250, 60)">
<text x="0" y="-30">---------- meet ----------</text>
<g><text y="-10">*YMin</text>&Viewport2;
<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 30 40"
width="30" height="60">&Smile;</svg></g>
<g transform="translate(50, 0)"><text y="-10">*YMid</text>&Viewport2;
<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 40"
width="30" height="60">&Smile;</svg></g>
<g transform="translate(100, 0)"><text y="-10">*YMax</text>&Viewport2;
<svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 30 40"
width="30" height="60">&Smile;</svg></g>
</g>
<g id="slice-group-1" transform="translate(100, 220)">
<text x="0" y="-30">---------- slice ----------</text>
<g><text y="-10">xMin*</text>&Viewport2;
<svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 30 40"
width="30" height="60">&Smile;</svg></g>
<g transform="translate(50,0)"><text y="-10">xMid*</text>&Viewport2;
<svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 30 40"
width="30" height="60">&Smile;</svg></g>
<g transform="translate(100,0)"><text y="-10">xMax*</text>&Viewport2;
<svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 30 40"
width="30" height="60">&Smile;</svg></g>
</g>
<g id="slice-group-2" transform="translate(250, 220)">
<text x="0" y="-30">--------------- slice ---------------</text>
<g><text y="-10">*YMin</text>&Viewport1;
<svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 30 40"
width="50" height="30">&Smile;</svg></g>
<g transform="translate(70,0)"><text y="-10">*YMid</text>&Viewport1;
<svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 30 40"
width="50" height="30">&Smile;</svg></g>
<g transform="translate(140,0)"><text y="-10">*YMax</text>&Viewport1;
<svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 30 40"
width="50" height="30">&Smile;</svg></g>
</g>
</g>
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
For the ‘preserveAspectRatio’ attribute:
Анімується: так.
At any point in an SVG drawing, you can establish a new viewport into which all contained graphics is drawn by including an ‘svg’ element inside SVG content. By establishing a new viewport, you also implicitly establish a new viewport coordinate system, a new user coordinate system, and, potentially, a new clipping path (дивіться the definition of the ‘overflow’ property). Additionally, there is a new meaning for percentage units defined to be relative to the current viewport since a new viewport has been established (дивіться Units).
bounds of the new viewport are defined by the ‘x’, ‘y’, ‘width’ and ‘height’ attributes on the element establishing the new viewport, such as an ‘svg’ element. Both the new viewport coordinate system and the new user coordinate system have their origins at (‘x’, ‘y’), where ‘x’ and ‘y’ represent the значення the corresponding attributes on the element establishing the viewport. orientation of the new viewport coordinate system and the new user coordinate system correspond to the orientation of the current user coordinate system for the element establishing the viewport. A single unit in the new viewport coordinate system and the new user coordinate system are the same size as a single unit in the current user coordinate system for the element establishing the viewport.
Here is an example:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="4in" height="3in" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<desc>This SVG drawing embeds another one,
thus establishing a new viewport
</desc>
<!-- following statement establishing a new viewport
and renders SVG drawing B into that viewport -->
<svg x="25%" y="25%" width="50%" height="50%">
<!-- drawing B goes here -->
</svg>
</svg>
For an extensive example of creating new viewports, see Приклад PreserveAspectRatio.
following elements establish new viewports:
Whether a new viewport also establishes a new additional clipping path is determined by the значення the ‘overflow’ property on the element that establishes the new viewport. Якщо a clipping path is created to correspond to the new viewport, the clipping path's geometry is determined by the значення the ‘clip’ property. Also, see Clip to viewport vs. clip to ‘viewBox’.
All coordinates and lengths in SVG can be specified with or without a unit identifier.
When a coordinate or length value is a number without a unit identifier (тобто, "25"), then the given coordinate or length is assumed to be in user units (тобто, a value in the current user coordinate system). For example:
<text font-size="50">Text size is 50 user units</text>
Alternatively, a coordinate or length value can be expressed as a number followed by a unit identifier (тобто, "25cm" or "15em"). (Note that CSS defined properties used in a CSS style sheet or the ‘style’ attribute require units for non-zero lengths, see SVG's styling properties.) list of unit identifiers in SVG matches the list of unit identifiers in CSS: em, ex, px, pt, pc, cm, mm and in. <length> type can also have a percentage unit identifier. following описує how the various unit identifiers are processed:
As in CSS, the em and ex unit identifiers are relative to the current font's font-size and x-height, respectively.
One px unit is defined to be equal to one user unit. Thus, a length of "5px" is the same as a length of "5".
Note that at initialization, a user unit in the the початкова координатна система is equivalenced to the parent environment's notion of a px unit. Thus, in the the початкова координатна система, because the user coordinate system aligns exactly with the parent's coordinate system, and because often the parent's coordinate system aligns with the device pixel grid, "5px" might actually map to 5 devices pixels. Однак, if there are any coordinate system transformation due to the use of ‘transform’ or ‘viewBox’ attributes, because "5px" maps to 5 user units and because the coordinate system transformations have resulted in a revised user coordinate system, "5px" likely will not map to 5 device pixels. As a result, in most circumstances, "px" units will not map to the device pixel grid.
other absolute unit identifiers from CSS (тобто, pt, pc, cm, mm, in) are all defined as an appropriate multiple of one px unit (which, according to the previous item, is defined to be equal to one user unit), based on what the SVG користувацький агент determines is the size of a px unit (possibly passed from the parent processor or environment at initialization time). For example, suppose that the користувацький агент can determine from its environment that "1px" corresponds to "0.2822222mm" (тобто, 90dpi). Then, for all processing of SVG content:
Note that use of px units or any other absolute unit identifiers can cause inconsistent visual results on different viewing environments since the size of "1px" may map to a different number of user units on different systems; таким чином, absolute units identifiers are only recommended for the ‘width’ and the ‘height’ on and situations where the content contains no transformations and it is desirable to specify values relative to the device pixel grid or to a particular real world unit size.
For percentage values that are defined to be relative to the size of viewport:
sqrt((actual-width)**2
+ (actual-height)**2))/sqrt(2).Приклад Units below illustrates some of the processing rules for different types of units.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="400px" height="200px" viewBox="0 0 4000 2000"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Приклад Units</title>
<desc>Illustrates various units options</desc>
<!-- Frame the picture -->
<rect x="5" y="5" width="3990" height="1990"
fill="none" stroke="blue" stroke-width="10"/>
<g fill="blue" stroke="red" font-family="Verdana" font-size="150">
<!-- Absolute unit specifiers -->
<g transform="translate(400,0)">
<text x="-50" y="300" fill="black" stroke="none">Abs. units:</text>
<rect x="0" y="400" width="4in" height="2in" stroke-width=".4in"/>
<rect x="0" y="750" width="384" height="192" stroke-width="38.4"/>
<g transform="scale(2)">
<rect x="0" y="600" width="4in" height="2in" stroke-width=".4in"/>
</g>
</g>
<!-- Relative unit specifiers -->
<g transform="translate(1600,0)">
<text x="-50" y="300" fill="black" stroke="none">Rel. units:</text>
<rect x="0" y="400" width="2.5em" height="1.25em" stroke-width=".25em"/>
<rect x="0" y="750" width="375" height="187.5" stroke-width="37.5"/>
<g transform="scale(2)">
<rect x="0" y="600" width="2.5em" height="1.25em" stroke-width=".25em"/>
</g>
</g>
<!-- Percentages -->
<g transform="translate(2800,0)">
<text x="-50" y="300" fill="black" stroke="none">Percentages:</text>
<rect x="0" y="400" width="10%" height="10%" stroke-width="1%"/>
<rect x="0" y="750" width="400" height="200" stroke-width="31.62"/>
<g transform="scale(2)">
<rect x="0" y="600" width="10%" height="10%" stroke-width="1%"/>
</g>
</g>
</g>
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
three rectangles on the left demonstrate the use of one of the absolute unit identifiers, the "in" unit (inch). reference image above was generated on a 96dpi system (тобто, 1 inch = 96 pixels). Therefore, the topmost rectangle, which is specified in inches, is exactly the same size as the middle rectangle, which is specified in user units such that there are 96 user units for each corresponding inch in the topmost rectangle. (Note: on systems with different screen resolutions, the top and middle rectangles will likely be rendered at different sizes.) bottom rectangle of the group illustrates what happens when values specified in inches are scaled.
three rectangles in the middle demonstrate the use of one of the relative unit identifiers, the "em" unit. Because the ‘font-size’ property has been set to 150 on the outermost ‘g’ element, each "em" unit is equal to 150 user units. topmost rectangle, which is specified in "em" units, is exactly the same size as the middle rectangle, which is specified in user units such that there are 150 user units for each corresponding "em" unit in the topmost rectangle. bottom rectangle of the group illustrates what happens when values specified in "em" units are scaled.
three rectangles on the right demonstrate the use of percentages. Note
that the width and height of the viewport in the user coordinate system
for the viewport element (in this case, the outermost svg element) are 4000 and
2000, respectively, because processing the ‘viewBox’ attribute results in a
transformed user coordinate system. topmost rectangle, which is
specified in percentage units, is exactly the same size as the middle
rectangle, which is specified in equivalent user units. In particular,
note that the ‘stroke-width’
property in the middle rectangle is set to 1% of the sqrt((actual-width)**2
+ (actual-height)**2)) / sqrt(2), which in this case
is .01*sqrt(4000*4000+2000*2000)/sqrt(2), or 31.62. bottom rectangle
of the group illustrates what happens when values specified in
percentage units are scaled.
following elements offer the option of expressing coordinate values and lengths as fractions (and, in some cases, percentages) of the bounding box, by setting a specified attribute to 'objectBoundingBox' on the given element:
| Element | Attribute | Effect |
|---|---|---|
| ‘linearGradient’ | ‘gradientUnits’ | Вказує that the attributes which specify the gradient vector (‘x1’, ‘y1’, ‘x2’, ‘y2’) represent fractions or percentages of the bounding box елементу to which the gradient is applied. |
| ‘radialGradient’ | ‘gradientUnits’ | Вказує that the attributes which specify the center (‘cx’, ‘cy’), the radius (‘r’) and focus (‘fx’, ‘fy’) represent fractions or percentages of the bounding box елементу to which the gradient is applied. |
| ‘pattern’ | ‘patternUnits’ | Вказує that the attributes which define how to tile the pattern (‘x’, ‘y’, ‘width’, ‘height’) are established using the bounding box елементу to which the pattern is applied. |
| ‘pattern’ | ‘patternContentUnits’ | Вказує that the user coordinate system for the contents of the pattern is established using the bounding box елементу to which the pattern is applied. |
| ‘clipPath’ | ‘clipPathUnits’ | Вказує that the user coordinate system for the contents of the ‘clipPath’ element is established using the bounding box елементу to which the clipping path is applied. |
| ‘mask’ | ‘maskUnits’ | Вказує that the attributes which define the masking region (‘x’, ‘y’, ‘width’, ‘height’) is established using the bounding box елементу to which the mask is applied. |
| ‘mask’ | ‘maskContentUnits’ | Вказує that the user coordinate system for the contents of the ‘mask’ element are established using the bounding box елементу to which the mask is applied. |
| ‘filter’ | ‘filterUnits’ | Вказує that the attributes which define the filter effects region (‘x’, ‘y’, ‘width’, ‘height’) represent fractions or percentages of the bounding box елементу to which the filter is applied. |
| ‘filter’ | ‘primitiveUnits’ | Вказує that the various length values within the filter primitives represent fractions or percentages of the bounding box елементу to which the filter is applied. |
In the discussion that follows, the term applicable element is the element to which the given effect applies. For gradients and patterns, the applicable element is the графічний елемент which has its ‘fill’ or ‘stroke’ property referencing the given gradient or pattern. ( Дивіться Inheritance of Painting Properties. For special rules concerning text elements, see the discussion of object bounding box units and text elements.) For clipping paths, masks and filters, the applicable element can be either a контейнерний елемент or a графічний елемент.
When keyword objectBoundingBox is used, тоді ефект такий, якщо б було supplemental transformation matrix were inserted into the list of nested transformation matrices to create a new user coordinate system.
First, the (minx,miny) and (maxx,maxy) coordinates are determined for the applicable element and all of its descendants. values minx, miny, maxx and maxy are determined by computing the maximum extent of the shape елементу in X and Y with respect to the user coordinate system for the applicable element. bounding box is the tightest fitting rectangle aligned with the axes of the applicable element's user coordinate system that entirely encloses the applicable element and its descendants. bounding box is computed exclusive of any values for clipping, masking, filter effects, opacity and stroke-width. For curved shapes, the bounding box encloses all portions of the shape, not just end points. For ‘text’ elements, for the purposes of the bounding box calculation, each glyph is treated as a separate графічний елемент. calculations assume that all glyphs occupy the full glyph cell. For example, for horizontal text, the calculations assume that each glyph extends vertically to the full ascent and descent values for the font.
Then, coordinate (0,0) in the new user coordinate system is mapped to the (minx,miny) corner of the tight bounding box within the user coordinate system of the applicable element and coordinate (1,1) in the new user coordinate system is mapped to the (maxx,maxy) corner of the tight bounding box of the applicable element. In most situations, the following transformation matrix produces the correct effect:
[ (maxx-minx) 0 0 (maxy-miny) minx miny ]
When percentages are used with attributes that define the gradient vector, the pattern tile, the filter region or the masking region, a percentage represents the same value as the corresponding decimal value (тобто, 50% means the same as 0.5). Якщо percentages are used within the content of a ‘pattern’, ‘clipPath’, ‘mask’ or ‘filter’ element, these values are treated according to the processing rules for percentages as defined in Units.
Any numeric value can be specified for values expressed as a fraction or percentage of object bounding box units. In particular, fractions less are zero or greater than one and percentages less than 0% or greater than 100% can be specified.
Keyword objectBoundingBox should not бути використано when the geometry of the applicable element has no width or no height, such as the case of a horizontal or vertical line, even when the line has actual thickness when viewed due to having a non-zero stroke width since stroke width is ignored for bounding box calculations. When the geometry of the applicable element has no width or height and objectBoundingBox is specified, then the given effect (тобто, a gradient or a filter) will be ignored.
SVG needs to specify how to calculate some intrinsic sizing properties to enable inclusion within other languages. intrinsic width and height of the viewport of SVG content must be determined from the ‘width’ and ‘height’ attributes. Якщо either of these are not specified, a значення '100%' must be assumed. Note: the ‘width’ and ‘height’ attributes are not the same as the CSS width and height properties. Specifically, percentage values do not provide an intrinsic width or height, and do not indicate a percentage of the containing block. Rather, once the viewport is established, they indicate the portion of the viewport that is actually covered by image data.
intrinsic aspect ratio of the viewport of SVG content is necessary for example, when including SVG from an ‘object’ element in HTML styled with CSS. It is possible (indeed, common) for an SVG graphic to have an intrinsic aspect ratio but not to have an intrinsic width or height. intrinsic aspect ratio must be calculated based upon the following rules:
aspect ratio is calculated by dividing a width by a height.
Якщо the ‘width’ and ‘height’ of the rootmost ‘svg’ element are both specified with unit identifiers (in, mm, cm, pt, pc, px, em, ex) or in user units, then the aspect ratio is calculated from the ‘width’ and ‘height’ attributes after resolving both values to user units.
Якщо either/both of the ‘width’ and ‘height’ of the rootmost ‘svg’ element are in percentage units (or omitted), the aspect ratio is calculated from the width and height values of the ‘viewBox’ specified для поточного фрагменту документу SVG. Якщо the ‘viewBox’ is not correctly specified, or set to 'none', the intrinsic aspect ratio cannot be calculated and is considered unspecified.
Прикладs:
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
width="10cm" height="5cm">
...
</svg>
In this example the intrinsic aspect ratio of the viewport is 2:1. intrinsic width is 10cm and the intrinsic height is 5cm.
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
width="100%" height="50%" viewBox="0 0 200 200">
...
</svg>
In this example the intrinsic aspect ratio of the rootmost viewport is 1:1. An aspect ratio calculation in this case allows embedding in an object within a containing block that is only constrained in one direction.
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
width="10cm" viewBox="0 0 200 200">
...
</svg>
In this case the intrinsic aspect ratio is 1:1.
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
width="75%" height="10cm" viewBox="0 0 200 200">
...
</svg>
In this example, the intrinsic aspect ratio is 1:1.
In order to allow interoperability between SVG content generators and користувацькі агенти dealing with maps encoded in SVG, the use of a common metadata definition for describing the coordinate system used to generate SVG documents is encouraged.
Such metadata must be added under the ‘metadata’ element of the topmost ‘svg’ element describing the map, consisting of an RDF description of the Coordinate Reference System definition used to generate the SVG map [RDF-PRIMER]. Note that the presence of this metadata does not affect the rendering of the SVG in any way; it merely provides added semantic value for applications that make use of combined maps.
definition must be conformant to the XML grammar described in GML 3.2.1, an OpenGIS Standard for encoding common CRS data types in XML [GML]. In order to correctly map the 2-dimensional data used by SVG, the CRS must be of subtype ProjectedCRS or Geographic2dCRS. first axis of the described CRS maps the SVG x-axis and the second axis maps the SVG y-axis.
main purpose of such metadata is to indicate to the користувацький агент that two or more SVG documents can be overlayed or merged into a single document. Obviously, if two maps reference the same Coordinate Reference System definition and have the same SVG ‘transform’ attribute value then they can be overlayed without reprojecting the data. Якщо the maps reference different Coordinate Reference Systems and/or have different SVG ‘transform’ attribute values, then a specialized cartographic користувацький агент may choose to transform the coordinate data to overlay the data. Однак, typical SVG користувацькі агенти are not required to perform these types of transformations, or even recognize the metadata. It is described in this specification so that the connection between geographic coordinate systems and the SVG coordinate system is clear.
Attribute definition:
Задає the affine transformation that has been applied to the map data. syntax is identical to that described in ‘transform’ attribute section.
Задає that no supplemental affine transformation has been applied to the map data. Using this value has the same meaning as specifying the identity matrix, which in turn is just the same as not specifying the ‘svg:transform’ the attribute at all.
Анімується: ні.
This attribute описує an optional additional affine transformation that may have been applied during this mapping. This attribute may be added to the OpenGIS ‘CoordinateReferenceSystem’ element. Note that, unlike the ‘transform’ attribute, it does not indicate that a transformation is to be applied to the data within the file. Instead, it simply описує the transformation that was already applied to the data when being encoded in SVG.
There are three typical uses for the ‘svg:transform’ global attribute. These are described below and used in the examples.
Most ProjectedCRS have the north direction represented by positive values of the second axis and conversely SVG has a y-down coordinate system. That's why, in order to follow the usual way to represent a map with the north at its top, it is recommended for that kind of ProjectedCRS to use the ‘svg:transform’ global attribute with a 'scale(1, -1)' value as in the third example below.
Most Geographic2dCRS have the latitude as their first axis rather than the longitude, which means that the south-north axis would be represented by the x-axis in SVG instead of the usual y-axis. That's why, in order to follow the usual way to represent a map with the north at its top, it is recommended for that kind of Geographic2dCRS to use the ‘svg:transform’ global attribute with a 'rotate(-90)' value as in the first example (while also adding the 'scale(1, -1)' as for ProjectedCRS).
In addition, when converting for profiles which place restrictions on precision of real number values, it may be useful to add an additional scaling factor to retain good precision for a specific area. When generating документ SVG from WGS84 geographic coordinates (EPGS 4326), we recommend the use of an additional 100 times scaling factor corresponding to an ‘svg:transform’ global attribute with a 'rotate(-90) scale(100)' value (shown in the second example). Different scaling values may be required depending on the particular CRS.
Below is a simple example of the coordinate metadata, which описує the coordinate system used by the document via a URI.
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="100" height="100" viewBox="0 0 1000 1000">
<desc>An example that references coordinate data.</desc>
<metadata>
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:crs="http://www.ogc.org/crs"
xmlns:svg="http://www.w3.org/2000/svg">
<rdf:Description rdf:about="">
<!-- Coordinate Reference System is described
through a URI. -->
<crs:CoordinateReferenceSystem
svg:transform="rotate(-90)"
rdf:resource="http://www.example.org/srs/epsg.xml#4326"/>
</rdf:Description>
</rdf:RDF>
</metadata>
<!-- actual map content -->
</svg>
second example uses a well-known identifier to describe the coordinate system. Note that the coordinates used in the document have had the supplied transform applied.
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="100" height="100" viewBox="0 0 1000 1000">
<desc>Приклад using a well known coordinate system.</desc>
<metadata>
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:crs="http://www.ogc.org/crs"
xmlns:svg="http://www.w3.org/2000/svg">
<rdf:Description rdf:about="">
<!-- In case of a well-known Coordinate Reference System
an 'Identifier' is enough to describe the CRS -->
<crs:CoordinateReferenceSystem svg:transform="rotate(-90) scale(100, 100)">
<crs:Identifier>
<crs:code>4326</crs:code>
<crs:codeSpace>EPSG</crs:codeSpace>
<crs:edition>5.2</crs:edition>
</crs:Identifier>
</crs:CoordinateReferenceSystem>
</rdf:Description>
</rdf:RDF>
</metadata>
<!-- actual map content -->
</svg>
third example defines the coordinate system completely within the SVG document.
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="100" height="100" viewBox="0 0 1000 1000">
<desc>Coordinate metadata defined within the SVG document</desc>
<metadata>
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:crs="http://www.ogc.org/crs"
xmlns:svg="http://www.w3.org/2000/svg">
<rdf:Description rdf:about="">
<!-- For other CRS it should be entirely defined -->
<crs:CoordinateReferenceSystem svg:transform="scale(1,-1)">
<crs:NameSet>
<crs:name>Mercator projection of WGS84</crs:name>
</crs:NameSet>
<crs:ProjectedCRS>
<!-- actual definition of the CRS -->
<crs:CartesianCoordinateSystem>
<crs:dimension>2</crs:dimension>
<crs:CoordinateAxis>
<crs:axisDirection>north</crs:axisDirection>
<crs:AngularUnit>
<crs:Identifier>
<crs:code>9108</crs:code>
<crs:codeSpace>EPSG</crs:codeSpace>
<crs:edition>5.2</crs:edition>
</crs:Identifier>
</crs:AngularUnit>
</crs:CoordinateAxis>
<crs:CoordinateAxis>
<crs:axisDirection>east</crs:axisDirection>
<crs:AngularUnit>
<crs:Identifier>
<crs:code>9108</crs:code>
<crs:codeSpace>EPSG</crs:codeSpace>
<crs:edition>5.2</crs:edition>
</crs:Identifier>
</crs:AngularUnit>
</crs:CoordinateAxis>
</crs:CartesianCoordinateSystem>
<crs:CoordinateReferenceSystem>
<!-- the reference system of that projected system is
WGS84 which is EPSG 4326 in EPSG codeSpace -->
<crs:NameSet>
<crs:name>WGS 84</crs:name>
</crs:NameSet>
<crs:Identifier>
<crs:code>4326</crs:code>
<crs:codeSpace>EPSG</crs:codeSpace>
<crs:edition>5.2</crs:edition>
</crs:Identifier>
</crs:CoordinateReferenceSystem>
<crs:CoordinateTransformationDefinition>
<crs:sourceDimensions>2</crs:sourceDimensions>
<crs:targetDimensions>2</crs:targetDimensions>
<crs:ParameterizedTransformation>
<crs:TransformationMethod>
<!-- the projection is a Mercator projection which is
EPSG 9805 in EPSG codeSpace -->
<crs:NameSet>
<crs:name>Mercator</crs:name>
</crs:NameSet>
<crs:Identifier>
<crs:code>9805</crs:code>
<crs:codeSpace>EPSG</crs:codeSpace>
<crs:edition>5.2</crs:edition>
</crs:Identifier>
<crs:description>Mercator (2SP)</crs:description>
</crs:TransformationMethod>
<crs:Parameter>
<crs:NameSet>
<crs:name>Latitude of 1st standart parallel</crs:name>
</crs:NameSet>
<crs:Identifier>
<crs:code>8823</crs:code>
<crs:codeSpace>EPSG</crs:codeSpace>
<crs:edition>5.2</crs:edition>
</crs:Identifier>
<crs:value>0</crs:value>
</crs:Parameter>
<crs:Parameter>
<crs:NameSet>
<crs:name>Longitude of natural origin</crs:name>
</crs:NameSet>
<crs:Identifier>
<crs:code>8802</crs:code>
<crs:codeSpace>EPSG</crs:codeSpace>
<crs:edition>5.2</crs:edition>
</crs:Identifier>
<crs:value>0</crs:value>
</crs:Parameter>
<crs:Parameter>
<crs:NameSet>
<crs:name>False Easting</crs:name>
</crs:NameSet>
<crs:Identifier>
<crs:code>8806</crs:code>
<crs:codeSpace>EPSG</crs:codeSpace>
<crs:edition>5.2</crs:edition>
</crs:Identifier>
<crs:value>0</crs:value>
</crs:Parameter>
<crs:Parameter>
<crs:NameSet>
<crs:name>False Northing</crs:name>
</crs:NameSet>
<crs:Identifier>
<crs:code>8807</crs:code>
<crs:codeSpace>EPSG</crs:codeSpace>
<crs:edition>5.2</crs:edition>
</crs:Identifier>
<crs:value>0</crs:value>
</crs:Parameter>
</crs:ParameterizedTransformation>
</crs:CoordinateTransformationDefinition>
</crs:ProjectedCRS>
</crs:CoordinateReferenceSystem>
</rdf:Description>
</rdf:RDF>
</metadata>
<!-- the actual map content -->
</svg>
Many of the SVG DOM interfaces refer to objects of class SVGPoint. An SVGPoint is an (x, y) coordinate pair. When used in matrix operations, an SVGPoint is treated as a vector of the form:
[x] [y] [1]
Якщо an SVGRect об’єкт designated as read only, then attempting to assign to one of its attributes will result in an exception being thrown.
Інтерфейс SVGPoint {
attribute float x setraises(DOMException);
attribute float y setraises(DOMException);
SVGPoint matrixTransform(in SVGMatrix matrix);
};
This interface defines a list of SVGPoint objects.
SVGPointList has the same attributes and methods as other SVGxxxList interfaces. Implementers may consider using a single base class to implement the various SVGxxxList interfaces.
Інтерфейс SVGPointList {
readonly attribute unsigned long numberOfItems;
void clear() raises(DOMException);
SVGPoint initialize(in SVGPoint newItem) raises(DOMException);
SVGPoint getItem(in unsigned long index) raises(DOMException);
SVGPoint insertItemBefore(in SVGPoint newItem, in unsigned long index) raises(DOMException);
SVGPoint replaceItem(in SVGPoint newItem, in unsigned long index) raises(DOMException);
SVGPoint removeItem(in unsigned long index) raises(DOMException);
SVGPoint appendItem(in SVGPoint newItem) raises(DOMException);
};
Many of SVG's graphics operations utilize 2x3 matrices of the form:
[a c e] [b d f]
which, when expanded into a 3x3 matrix for the purposes of matrix arithmetic, become:
[a c e] [b d f] [0 0 1]
Інтерфейс SVGMatrix {
attribute float a setraises(DOMException);
attribute float b setraises(DOMException);
attribute float c setraises(DOMException);
attribute float d setraises(DOMException);
attribute float e setraises(DOMException);
attribute float f setraises(DOMException);
SVGMatrix multiply(in SVGMatrix secondMatrix);
SVGMatrix inverse() raises(SVGException);
SVGMatrix translate(in float x, in float y);
SVGMatrix scale(in float scaleFactor);
SVGMatrix scaleNonUniform(in float scaleFactorX, in float scaleFactorY);
SVGMatrix rotate(in float angle);
SVGMatrix rotateFromVector(in float x, in float y) raises(SVGException);
SVGMatrix flipX();
SVGMatrix flipY();
SVGMatrix skewX(in float angle);
SVGMatrix skewY(in float angle);
};
Інтерфейс SVGTransform {
// Transform Types
const unsigned short SVG_TRANSFORM_UNKNOWN = 0;
const unsigned short SVG_TRANSFORM_MATRIX = 1;
const unsigned short SVG_TRANSFORM_TRANSLATE = 2;
const unsigned short SVG_TRANSFORM_SCALE = 3;
const unsigned short SVG_TRANSFORM_ROTATE = 4;
const unsigned short SVG_TRANSFORM_SKEWX = 5;
const unsigned short SVG_TRANSFORM_SKEWY = 6;
readonly attribute unsigned short type;
readonly attribute SVGMatrix matrix;
readonly attribute float angle;
void setMatrix(in SVGMatrix matrix) raises(DOMException);
void setTranslate(in float tx, in float ty) raises(DOMException);
void setScale(in float sx, in float sy) raises(DOMException);
void setRotate(in float angle, in float cx, in float cy) raises(DOMException);
void setSkewX(in float angle) raises(DOMException);
void setSkewY(in float angle) raises(DOMException);
};
matrix that represents this transformation. matrix об’єкт live, meaning that any changes made to the SVGTransform object are immediately reflected in the matrix object and vice versa. In case the matrix об’єкт changed directly (тобто, without using the methods on the SVGTransform interface itself) then the type of the SVGTransform changes to SVG_TRANSFORM_MATRIX.
A convenience attribute for SVG_TRANSFORM_ROTATE, SVG_TRANSFORM_SKEWX and SVG_TRANSFORM_SKEWY. It holds the angle that was specified.
For SVG_TRANSFORM_MATRIX, SVG_TRANSFORM_TRANSLATE and SVG_TRANSFORM_SCALE, angle will be zero.
Sets the transform type to SVG_TRANSFORM_MATRIX, with parameter matrix defining the new transformation. values from the parameter matrix are copied, the matrix parameter does not replace SVGTransform::matrix.
This interface defines a list of SVGTransform objects.
SVGTransformList and SVGTransform interfaces correspond to the various attributes which specify a set of transformations, such as the ‘transform’ attribute which is available for many of SVG's elements.
SVGTransformList has the same attributes and methods as other SVGxxxList interfaces. Implementers may consider using a single base class to implement the various SVGxxxList interfaces.
An SVGTransformList object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown, as described below.
Інтерфейс SVGTransformList {
readonly attribute unsigned long numberOfItems;
void clear() raises(DOMException);
SVGTransform initialize(in SVGTransform newItem) raises(DOMException);
SVGTransform getItem(in unsigned long index) raises(DOMException);
SVGTransform insertItemBefore(in SVGTransform newItem, in unsigned long index) raises(DOMException);
SVGTransform replaceItem(in SVGTransform newItem, in unsigned long index) raises(DOMException);
SVGTransform removeItem(in unsigned long index) raises(DOMException);
SVGTransform appendItem(in SVGTransform newItem) raises(DOMException);
SVGTransform createSVGTransformFromMatrix(in SVGMatrix matrix);
SVGTransform consolidate() raises(DOMException);
};
Створює SVGTransform object which is ініціалізований в transform of type SVG_TRANSFORM_MATRIX and whose values are the given matrix. values from the parameter matrix are copied, the matrix parameter is not adopted as SVGTransform::matrix.
Інтерфейс SVGAnimatedTransformList {
readonly attribute SVGTransformList baseVal;
readonly attribute SVGTransformList animVal;
};
An SVGPreserveAspectRatio object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown, as described below.
Інтерфейс SVGPreserveAspectRatio {
// Alignment Types
const unsigned short SVG_PRESERVEASPECTRATIO_UNKNOWN = 0;
const unsigned short SVG_PRESERVEASPECTRATIO_NONE = 1;
const unsigned short SVG_PRESERVEASPECTRATIO_XMINYMIN = 2;
const unsigned short SVG_PRESERVEASPECTRATIO_XMIDYMIN = 3;
const unsigned short SVG_PRESERVEASPECTRATIO_XMAXYMIN = 4;
const unsigned short SVG_PRESERVEASPECTRATIO_XMINYMID = 5;
const unsigned short SVG_PRESERVEASPECTRATIO_XMIDYMID = 6;
const unsigned short SVG_PRESERVEASPECTRATIO_XMAXYMID = 7;
const unsigned short SVG_PRESERVEASPECTRATIO_XMINYMAX = 8;
const unsigned short SVG_PRESERVEASPECTRATIO_XMIDYMAX = 9;
const unsigned short SVG_PRESERVEASPECTRATIO_XMAXYMAX = 10;
// Meet-or-slice Types
const unsigned short SVG_MEETORSLICE_UNKNOWN = 0;
const unsigned short SVG_MEETORSLICE_MEET = 1;
const unsigned short SVG_MEETORSLICE_SLICE = 2;
attribute unsigned short align setraises(DOMException);
attribute unsigned short meetOrSlice setraises(DOMException);
};
Інтерфейс SVGAnimatedPreserveAspectRatio {
readonly attribute SVGPreserveAspectRatio baseVal;
readonly attribute SVGPreserveAspectRatio animVal;
};
Paths represent the outline of a shape which can be filled, stroked, used as a clipping path, or any combination of the three. ( Дивіться Filling, Stroking and Paint Servers and Clipping, Masking and Compositing.)
A path is described using the concept of a current point. In an analogy with drawing on paper, the current point can be thought of as the location of the pen. position of the pen can be changed, and the outline of a shape (open or closed) can be traced by dragging the pen in either straight lines or curves.
Paths represent the geometry of the outline of an object, defined in terms of moveto (set a new current point), lineto (draw a straight line), curveto (draw a curve using a cubic Bézier), arc (elliptical or circular arc) and closepath (close the current shape by drawing a line to the last moveto) elements. Compound paths (тобто, a path with multiple subpaths) are possible to allow effects such as "donut holes" in objects.
This chapter описує the syntax, behavior and DOM interfaces for SVG paths. Various implementation notes for SVG paths can be found in ‘path’ element implementation notes and Elliptical arc implementation notes.
A path is defined in SVG using the ‘path’ element.
Визначення атрибутів:
A path is defined by including a ‘path’ element which contains a d="(path data)" attribute, where the ‘d’ attribute contains the moveto, line, curve (both cubic and quadratic Béziers), arc and closepath instructions.
Приклад triangle01 specifies a path in the shape of a triangle. ( M indicates a moveto, the Ls indicate linetos, and the z indicates a closepath).
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="4cm" height="4cm" viewBox="0 0 400 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Приклад triangle01- simple example of a 'path'</title>
<desc>A path that draws a triangle</desc>
<rect x="1" y="1" width="398" height="398"
fill="none" stroke="blue" />
<path d="M 100 100 L 300 100 L 200 300 z"
fill="red" stroke="blue" stroke-width="3" />
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
Path data can contain newline characters and thus can be broken up into multiple lines to improve readability. Because of line length limitations with certain related tools, it is recommended that SVG generators split long path data strings across multiple lines, with each line not exceeding 255 characters. Also note that newline characters are only allowed at certain places within path data.
syntax of path data is concise in order to allow for minimal file size and efficient downloads, since many SVG files will be dominated by their path data. Some of the ways that SVG attempts to minimize the size of path data are as follows:
path data syntax is a prefix notation (тобто, commands followed by parameters). only allowable decimal point is a Unicode U+0046 FULL STOP (".") character (also referred to in Unicode as PERIOD, dot and decimal point) and no other delimiter characters are allowed [UNICODE]. (For example, the following is an invalid numeric value in a path data stream: "13,000.56". Instead, say: "13000.56".)
For the relative versions of the commands, all coordinate values are relative to the current point at the start of the command.
In the tables below, the following notation is used:
following sections list the commands.
"moveto" commands (M or m) establish a new current point. effect is as if the "pen" were lifted and moved to a new location. A path data segment (if there is one) must begin with a "moveto" command. Subsequent "moveto" commands (тобто, when the "moveto" is not the first command) represent the start of a new subpath:
| Command | Name | Параметри | Description |
|---|---|---|---|
| M (absolute) m (relative) |
moveto | (x y)+ | Start a new sub-path at the given (x,y) coordinate. M (uppercase) indicates that absolute coordinates will follow; m (lowercase) indicates that relative coordinates will follow. Якщо a moveto is followed by multiple pairs of coordinates, the subsequent pairs are treated as implicit lineto commands. Hence, implicit lineto commands will be relative if the moveto is relative, and absolute if the moveto is absolute. Якщо a relative moveto (m) appears as the first element of the path, then it is treated as a pair of absolute coordinates. In this case, subsequent pairs of coordinates are treated as relative even though the initial moveto is interpreted as an absolute moveto. |
"closepath" (Z or z) ends the current subpath and causes an automatic straight line to be drawn from the current point to the initial point of the current subpath. Якщо a "closepath" is followed immediately by a "moveto", then the "moveto" identifies the start point of the next subpath. Якщо a "closepath" is followed immediately by any other command, then the next subpath starts at the same initial point as the current subpath.
When a subpath ends in a "closepath," it differs in behavior from what happens when "manually" closing a subpath via a "lineto" command in how ‘stroke-linejoin’ and ‘stroke-linecap’ are implemented. With "closepath", the end of the final segment of the subpath is "joined" with the start of the initial segment of the subpath using the current значення ‘stroke-linejoin’. Якщо you instead "manually" close the subpath via a "lineto" command, the start of the first segment and the end of the last segment are not joined but instead are each capped using the current значення ‘stroke-linecap’. At the end of the command, the new current point is set to the initial point of the current subpath.
| Command | Name | Параметри | Description |
|---|---|---|---|
| Z or z |
closepath | (none) | Close the current subpath by drawing a straight line from the current point to current subpath's initial point. Since the Z and z commands take no parameters, they have an identical effect. |
various "lineto" commands draw straight lines from the current point to a new point:
| Command | Name | Параметри | Description |
|---|---|---|---|
| L (absolute) l (relative) |
lineto | (x y)+ | Draw a line from the current point to the given (x,y) coordinate which becomes the new current point. L (uppercase) indicates that absolute coordinates will follow; l (lowercase) indicates that relative coordinates will follow. A number of coordinates pairs may be specified to draw a polyline. At the end of the command, the new current point is set to the final set of coordinates provided. |
| H (absolute) h (relative) |
horizontal lineto | x+ | Draws a horizontal line from the current point (cpx, cpy) to (x, cpy). H (uppercase) indicates that absolute coordinates will follow; h (lowercase) indicates that relative coordinates will follow. Multiple x values can be provided (although usually this doesn't make sense). At the end of the command, the new current point becomes (x, cpy) for the final значення x. |
| V (absolute) v (relative) |
vertical lineto | y+ | Draws a vertical line from the current point (cpx, cpy) to (cpx, y). V (uppercase) indicates that absolute coordinates will follow; v (lowercase) indicates that relative coordinates will follow. Multiple y values can be provided (although usually this doesn't make sense). At the end of the command, the new current point becomes (cpx, y) for the final значення y. |
These three groups of commands draw curves:
cubic Bézier commands are as follows:
| Command | Name | Параметри | Description |
|---|---|---|---|
| C (absolute) c (relative) |
curveto | (x1 y1 x2 y2 x y)+ | Draws a cubic Bézier curve from the current point to (x,y) using (x1,y1) as the control point at the beginning of the curve and (x2,y2) as the control point at the end of the curve. C (uppercase) indicates that absolute coordinates will follow; c (lowercase) indicates that relative coordinates will follow. Multiple sets of coordinates may be specified to draw a polybézier. At the end of the command, the new current point becomes the final (x,y) coordinate pair used in the polybézier. |
| S (absolute) s (relative) |
shorthand/smooth curveto | (x2 y2 x y)+ | Draws a cubic Bézier curve from the current point to (x,y). first control point is assumed to be the reflection of the second control point on the previous command relative to the current point. (Якщо there is no previous command or if the previous command was not an C, c, S or s, assume the first control point is coincident with the current point.) (x2,y2) is the second control point (тобто, the control point at the end of the curve). S (uppercase) indicates that absolute coordinates will follow; s (lowercase) indicates that relative coordinates will follow. Multiple sets of coordinates may be specified to draw a polybézier. At the end of the command, the new current point becomes the final (x,y) coordinate pair used in the polybézier. |
Приклад cubic01 shows some simple uses of cubic Bézier commands within a path. example uses an internal CSS style sheet to assign styling properties. Note that the control point for the "S" command is computed automatically as the reflection of the control point for the previous "C" command relative to the start point of the "S" command.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="4cm" viewBox="0 0 500 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Приклад cubic01- cubic Bézier commands in path data</title>
<desc>Picture showing a simple example of path data
using both a "C" and an "S" command,
along with annotations showing the control points
and end points</desc>
<style type="text/css"><![CDATA[
.Border { fill:none; stroke:blue; stroke-width:1 }
.Connect { fill:none; stroke:#888888; stroke-width:2 }
.SamplePath { fill:none; stroke:red; stroke-width:5 }
.EndPoint { fill:none; stroke:#888888; stroke-width:2 }
.CtlPoint { fill:#888888; stroke:none }
.AutoCtlPoint { fill:none; stroke:blue; stroke-width:4 }
.Label { font-size:22; font-family:Verdana }
]]></style>
<rect class="Border" x="1" y="1" width="498" height="398" />
<polyline class="Connect" points="100,200 100,100" />
<polyline class="Connect" points="250,100 250,200" />
<polyline class="Connect" points="250,200 250,300" />
<polyline class="Connect" points="400,300 400,200" />
<path class="SamplePath" d="M100,200 C100,100 250,100 250,200
S400,300 400,200" />
<circle class="EndPoint" cx="100" cy="200" r="10" />
<circle class="EndPoint" cx="250" cy="200" r="10" />
<circle class="EndPoint" cx="400" cy="200" r="10" />
<circle class="CtlPoint" cx="100" cy="100" r="10" />
<circle class="CtlPoint" cx="250" cy="100" r="10" />
<circle class="CtlPoint" cx="400" cy="300" r="10" />
<circle class="AutoCtlPoint" cx="250" cy="300" r="9" />
<text class="Label" x="25" y="70">M100,200 C100,100 250,100 250,200</text>
<text class="Label" x="325" y="350"
style="text-anchor:middle">S400,300 400,200</text>
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
following picture shows some how cubic Bézier curves change their shape depending on the position of the control points. first five examples illustrate a single cubic Bézier path segment. example at the lower right shows a "C" command followed by an "S" command.

Продивитись цей
приклад як SVG (потрібен переглядач з підтримкою SVG)
quadratic Bézier commands are as follows:
| Command | Name | Параметри | Description |
|---|---|---|---|
| Q (absolute) q (relative) |
quadratic Bézier curveto | (x1 y1 x y)+ | Draws a quadratic Bézier curve from the current point to (x,y) using (x1,y1) as the control point. Q (uppercase) indicates that absolute coordinates will follow; q (lowercase) indicates that relative coordinates will follow. Multiple sets of coordinates may be specified to draw a polybézier. At the end of the command, the new current point becomes the final (x,y) coordinate pair used in the polybézier. |
| T (absolute) t (relative) |
Shorthand/smooth quadratic Bézier curveto | (x y)+ | Draws a quadratic Bézier curve from the current point to (x,y). control point is assumed to be the reflection of the control point on the previous command relative to the current point. (Якщо there is no previous command or if the previous command was not a Q, q, T or t, assume the control point is coincident with the current point.) T (uppercase) indicates that absolute coordinates will follow; t (lowercase) indicates that relative coordinates will follow. At the end of the command, the new current point becomes the final (x,y) coordinate pair used in the polybézier. |
Приклад quad01 shows some simple uses of quadratic Bézier commands within a path. Note that the control point for the "T" command is computed automatically as the reflection of the control point for the previous "Q" command relative to the start point of the "T" command.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="6cm" viewBox="0 0 1200 600"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Приклад quad01 - quadratic Bézier commands in path data</title>
<desc>Picture showing a "Q" a "T" command,
along with annotations showing the control points
and end points</desc>
<rect x="1" y="1" width="1198" height="598"
fill="none" stroke="blue" stroke-width="1" />
<path d="M200,300 Q400,50 600,300 T1000,300"
fill="none" stroke="red" stroke-width="5" />
<!-- End points -->
<g fill="black" >
<circle cx="200" cy="300" r="10"/>
<circle cx="600" cy="300" r="10"/>
<circle cx="1000" cy="300" r="10"/>
</g>
<!-- Control points and lines from end points to control points -->
<g fill="#888888" >
<circle cx="400" cy="50" r="10"/>
<circle cx="800" cy="550" r="10"/>
</g>
<path d="M200,300 L400,50 L600,300
L800,550 L1000,300"
fill="none" stroke="#888888" stroke-width="2" />
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
elliptical arc commands are as follows:
| Command | Name | Параметри | Description |
|---|---|---|---|
| A (absolute) a (relative) |
elliptical arc | (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ | Draws an elliptical arc from the current point to (x, y). size and orientation of the ellipse are defined by two radii (rx, ry) and an x-axis-rotation, which indicates how the ellipse as a whole is rotated relative to the current coordinate system. center (cx, cy) of the ellipse is calculated automatically to satisfy the constraints imposed by the other parameters. large-arc-flag and sweep-flag contribute to the automatic calculations and help determine how the arc is drawn. |
Приклад arcs01 shows some simple uses of arc commands within a path.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="5.25cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Приклад arcs01 - arc commands in path data</title>
<desc>Picture of a pie chart with two pie wedges and
a picture of a line with arc blips</desc>
<rect x="1" y="1" width="1198" height="398"
fill="none" stroke="blue" stroke-width="1" />
<path d="M300,200 h-150 a150,150 0 1,0 150,-150 z"
fill="red" stroke="blue" stroke-width="5" />
<path d="M275,175 v-150 a150,150 0 0,0 -150,150 z"
fill="yellow" stroke="blue" stroke-width="5" />
<path d="M600,350 l 50,-25
a25,25 -30 0,1 50,-25 l 50,-25
a25,50 -30 0,1 50,-25 l 50,-25
a25,75 -30 0,1 50,-25 l 50,-25
a25,100 -30 0,1 50,-25 l 50,-25"
fill="none" stroke="red" stroke-width="5" />
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
elliptical arc command draws a section of an ellipse which meets the following constraints:
following illustrates the four combinations of large-arc-flag and sweep-flag and the four different arcs that will be drawn based on the values of these flags. For each case, the following path data command was used:
<path d="M 125,75 a100,50 0 ?,? 100,50"
style="fill:none; stroke:red; stroke-width:6"/>
where "?,?" is replaced by "0,0" "0,1" "1,0" and "1,1" to generate the four possible cases.

Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
Refer to Elliptical arc implementation notes for detailed implementation notes for the path data elliptical arc commands.
following notation is used in the Backus-Naur Form (BNF) description of the grammar for path data:
following is the BNF for SVG paths.
svg-path:
wsp* moveto-drawto-command-groups? wsp*
moveto-drawto-command-groups:
moveto-drawto-command-group
| moveto-drawto-command-group wsp* moveto-drawto-command-groups
moveto-drawto-command-group:
moveto wsp* drawto-commands?
drawto-commands:
drawto-command
| drawto-command wsp* drawto-commands
drawto-command:
closepath
| lineto
| horizontal-lineto
| vertical-lineto
| curveto
| smooth-curveto
| quadratic-bezier-curveto
| smooth-quadratic-bezier-curveto
| elliptical-arc
moveto:
( "M" | "m" ) wsp* moveto-argument-sequence
moveto-argument-sequence:
coordinate-pair
| coordinate-pair comma-wsp? lineto-argument-sequence
closepath:
("Z" | "z")
lineto:
( "L" | "l" ) wsp* lineto-argument-sequence
lineto-argument-sequence:
coordinate-pair
| coordinate-pair comma-wsp? lineto-argument-sequence
horizontal-lineto:
( "H" | "h" ) wsp* horizontal-lineto-argument-sequence
horizontal-lineto-argument-sequence:
coordinate
| coordinate comma-wsp? horizontal-lineto-argument-sequence
vertical-lineto:
( "V" | "v" ) wsp* vertical-lineto-argument-sequence
vertical-lineto-argument-sequence:
coordinate
| coordinate comma-wsp? vertical-lineto-argument-sequence
curveto:
( "C" | "c" ) wsp* curveto-argument-sequence
curveto-argument-sequence:
curveto-argument
| curveto-argument comma-wsp? curveto-argument-sequence
curveto-argument:
coordinate-pair comma-wsp? coordinate-pair comma-wsp? coordinate-pair
smooth-curveto:
( "S" | "s" ) wsp* smooth-curveto-argument-sequence
smooth-curveto-argument-sequence:
smooth-curveto-argument
| smooth-curveto-argument comma-wsp? smooth-curveto-argument-sequence
smooth-curveto-argument:
coordinate-pair comma-wsp? coordinate-pair
quadratic-bezier-curveto:
( "Q" | "q" ) wsp* quadratic-bezier-curveto-argument-sequence
quadratic-bezier-curveto-argument-sequence:
quadratic-bezier-curveto-argument
| quadratic-bezier-curveto-argument comma-wsp?
quadratic-bezier-curveto-argument-sequence
quadratic-bezier-curveto-argument:
coordinate-pair comma-wsp? coordinate-pair
smooth-quadratic-bezier-curveto:
( "T" | "t" ) wsp* smooth-quadratic-bezier-curveto-argument-sequence
smooth-quadratic-bezier-curveto-argument-sequence:
coordinate-pair
| coordinate-pair comma-wsp? smooth-quadratic-bezier-curveto-argument-sequence
elliptical-arc:
( "A" | "a" ) wsp* elliptical-arc-argument-sequence
elliptical-arc-argument-sequence:
elliptical-arc-argument
| elliptical-arc-argument comma-wsp? elliptical-arc-argument-sequence
elliptical-arc-argument:
nonnegative-number comma-wsp? nonnegative-number comma-wsp?
number comma-wsp flag comma-wsp? flag comma-wsp? coordinate-pair
coordinate-pair:
coordinate comma-wsp? coordinate
coordinate:
number
nonnegative-number:
integer-constant
| floating-point-constant
number:
sign? integer-constant
| sign? floating-point-constant
flag:
"0" | "1"
comma-wsp:
(wsp+ comma? wsp*) | (comma wsp*)
comma:
","
integer-constant:
digit-sequence
floating-point-constant:
fractional-constant exponent?
| digit-sequence exponent
fractional-constant:
digit-sequence? "." digit-sequence
| digit-sequence "."
exponent:
( "e" | "E" ) sign? digit-sequence
sign:
"+" | "-"
digit-sequence:
digit
| digit digit-sequence
digit:
"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"
wsp:
(#x20 | #x9 | #xD | #xA)
processing of the BNF must consume as much of a given BNF production as possible, stopping at the point when a character is encountered which no longer satisfies the production. Thus, in the string "M 100-200", the first coordinate for the "moveto" consumes the characters "100" and stops upon encountering the minus sign because the minus sign cannot follow a digit in the production of a "coordinate". result is that the first coordinate will be "100" and the second coordinate will be "-200".
Similarly, for the string "M 0.6.5", the first coordinate of the "moveto" consumes the characters "0.6" and stops upon encountering the second decimal point because the production of a "coordinate" only allows one decimal point. result is that the first coordinate will be "0.6" and the second coordinate will be ".5".
Note that the BNF allows the path ‘d’ attribute to be empty. This is not an error, instead it disables rendering of the path.
Various operations, including text on a path and motion animation and various stroke operations, require that the користувацький агент compute the distance along the geometry of a графічний елемент, such as a ‘path’.
Exact mathematics exist for computing distance along a path, but the formulas are highly complex and require substantial computation. It is recommended that authoring products and користувацькі агенти employ algorithms that produce as precise results as possible; however, to accommodate implementation differences and to help distance calculations produce results that approximate author intent, the ‘pathLength’ attribute can бути використано to provide the author's computation of the total length of the path so that the користувацький агент can scale distance-along-a-path computations by the ratio of ‘pathLength’ to the користувацький агент's own computed value for total path length.
A "moveto" operation within a ‘path’ element is defined to have zero length. Only the various "lineto", "curveto" and "arcto" commands contribute to path length calculations.
Інтерфейс SVGPathSeg {
// Path Segment Types
const unsigned short PATHSEG_UNKNOWN = 0;
const unsigned short PATHSEG_CLOSEPATH = 1;
const unsigned short PATHSEG_MOVETO_ABS = 2;
const unsigned short PATHSEG_MOVETO_REL = 3;
const unsigned short PATHSEG_LINETO_ABS = 4;
const unsigned short PATHSEG_LINETO_REL = 5;
const unsigned short PATHSEG_CURVETO_CUBIC_ABS = 6;
const unsigned short PATHSEG_CURVETO_CUBIC_REL = 7;
const unsigned short PATHSEG_CURVETO_QUADRATIC_ABS = 8;
const unsigned short PATHSEG_CURVETO_QUADRATIC_REL = 9;
const unsigned short PATHSEG_ARC_ABS = 10;
const unsigned short PATHSEG_ARC_REL = 11;
const unsigned short PATHSEG_LINETO_HORIZONTAL_ABS = 12;
const unsigned short PATHSEG_LINETO_HORIZONTAL_REL = 13;
const unsigned short PATHSEG_LINETO_VERTICAL_ABS = 14;
const unsigned short PATHSEG_LINETO_VERTICAL_REL = 15;
const unsigned short PATHSEG_CURVETO_CUBIC_SMOOTH_ABS = 16;
const unsigned short PATHSEG_CURVETO_CUBIC_SMOOTH_REL = 17;
const unsigned short PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS = 18;
const unsigned short PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL = 19;
readonly attribute unsigned short pathSegType;
readonly attribute DOMString pathSegTypeAsLetter;
};
Інтерфейс SVGPathSegClosePath : SVGPathSeg { };
Інтерфейс SVGPathSegMovetoAbs : SVGPathSeg { attribute float x setraises(DOMException); attribute float y setraises(DOMException); };
Інтерфейс SVGPathSegMovetoRel : SVGPathSeg { attribute float x setraises(DOMException); attribute float y setraises(DOMException); };
Інтерфейс SVGPathSegLinetoAbs : SVGPathSeg { attribute float x setraises(DOMException); attribute float y setraises(DOMException); };
Інтерфейс SVGPathSegLinetoRel : SVGPathSeg { attribute float x setraises(DOMException); attribute float y setraises(DOMException); };
Інтерфейс SVGPathSegCurvetoCubicAbs : SVGPathSeg { attribute float x setraises(DOMException); attribute float y setraises(DOMException); attribute float x1 setraises(DOMException); attribute float y1 setraises(DOMException); attribute float x2 setraises(DOMException); attribute float y2 setraises(DOMException); };
Інтерфейс SVGPathSegCurvetoCubicRel : SVGPathSeg { attribute float x setraises(DOMException); attribute float y setraises(DOMException); attribute float x1 setraises(DOMException); attribute float y1 setraises(DOMException); attribute float x2 setraises(DOMException); attribute float y2 setraises(DOMException); };
Інтерфейс SVGPathSegCurvetoQuadraticAbs : SVGPathSeg { attribute float x setraises(DOMException); attribute float y setraises(DOMException); attribute float x1 setraises(DOMException); attribute float y1 setraises(DOMException); };
Інтерфейс SVGPathSegCurvetoQuadraticRel : SVGPathSeg { attribute float x setraises(DOMException); attribute float y setraises(DOMException); attribute float x1 setraises(DOMException); attribute float y1 setraises(DOMException); };
Інтерфейс SVGPathSegArcAbs : SVGPathSeg { attribute float x setraises(DOMException); attribute float y setraises(DOMException); attribute float r1 setraises(DOMException); attribute float r2 setraises(DOMException); attribute float angle setraises(DOMException); attribute boolean largeArcFlag setraises(DOMException); attribute boolean sweepFlag setraises(DOMException); };
Інтерфейс SVGPathSegArcRel : SVGPathSeg { attribute float x setraises(DOMException); attribute float y setraises(DOMException); attribute float r1 setraises(DOMException); attribute float r2 setraises(DOMException); attribute float angle setraises(DOMException); attribute boolean largeArcFlag setraises(DOMException); attribute boolean sweepFlag setraises(DOMException); };
Інтерфейс SVGPathSegLinetoHorizontalAbs : SVGPathSeg { attribute float x setraises(DOMException); };
Інтерфейс SVGPathSegLinetoHorizontalRel : SVGPathSeg { attribute float x setraises(DOMException); };
Інтерфейс SVGPathSegLinetoVerticalAbs : SVGPathSeg { attribute float y setraises(DOMException); };
Інтерфейс SVGPathSegLinetoVerticalRel : SVGPathSeg { attribute float y setraises(DOMException); };
Інтерфейс SVGPathSegCurvetoCubicSmoothAbs : SVGPathSeg { attribute float x setraises(DOMException); attribute float y setraises(DOMException); attribute float x2 setraises(DOMException); attribute float y2 setraises(DOMException); };
Інтерфейс SVGPathSegCurvetoCubicSmoothRel : SVGPathSeg { attribute float x setraises(DOMException); attribute float y setraises(DOMException); attribute float x2 setraises(DOMException); attribute float y2 setraises(DOMException); };
Інтерфейс SVGPathSegCurvetoQuadraticSmoothAbs : SVGPathSeg { attribute float x setraises(DOMException); attribute float y setraises(DOMException); };
Інтерфейс SVGPathSegCurvetoQuadraticSmoothRel : SVGPathSeg { attribute float x setraises(DOMException); attribute float y setraises(DOMException); };
This interface defines a list of SVGPathSeg objects.
SVGPathSegList has the same attributes and methods as other SVGxxxList interfaces. Implementers may consider using a single base class to implement the various SVGxxxList interfaces.
Інтерфейс SVGPathSegList {
readonly attribute unsigned long numberOfItems;
void clear() raises(DOMException);
SVGPathSeg initialize(in SVGPathSeg newItem) raises(DOMException);
SVGPathSeg getItem(in unsigned long index) raises(DOMException);
SVGPathSeg insertItemBefore(in SVGPathSeg newItem, in unsigned long index) raises(DOMException);
SVGPathSeg replaceItem(in SVGPathSeg newItem, in unsigned long index) raises(DOMException);
SVGPathSeg removeItem(in unsigned long index) raises(DOMException);
SVGPathSeg appendItem(in SVGPathSeg newItem) raises(DOMException);
};
SVGAnimatedPathData interface supports elements which have a ‘d’ attribute which holds SVG path data, and supports the ability to animate that attribute.
SVGAnimatedPathData interface provides two lists to access and modify the base (тобто, static) contents of the ‘d’ attribute:
and two lists to access the current animated values of the ‘d’ attribute:
Each of the two lists are always kept synchronized. Modifications to one list will immediately cause the corresponding list to be modified. Modifications to normalizedPathSegList might cause entries in pathSegList to be broken into a set of normalized path segments.
Additionally, the ‘d’
attribute on the ‘path’
element accessed via the XML DOM (тобто, using the getAttribute()
method call) will reflect any changes made to pathSegList or normalizedPathSegList.
Інтерфейс SVGAnimatedPathData {
readonly attribute SVGPathSegList pathSegList;
readonly attribute SVGPathSegList normalizedPathSegList;
readonly attribute SVGPathSegList animatedPathSegList;
readonly attribute SVGPathSegList animatedNormalizedPathSegList;
};
Provides access to the base (тобто, static) contents of the ‘d’ attribute in a form where all path data commands are expressed in terms of the following subset of SVGPathSeg types: SVG_PATHSEG_MOVETO_ABS (M), SVG_PATHSEG_LINETO_ABS (L), SVG_PATHSEG_CURVETO_CUBIC_ABS (C) and SVG_PATHSEG_CLOSEPATH (z). Thus, if the ‘d’ attribute has an "absolute moveto (M)" and an "absolute arcto (A)" command, then pathSegList will have one SVG_PATHSEG_MOVETO_ABS entry followed by a series of SVG_PATHSEG_LINETO_ABS entries which approximate the arc. This alternate representation is available to provide a simpler interface to developers who would benefit from a more limited set of commands.
only valid SVGPathSeg types are SVG_PATHSEG_MOVETO_ABS (M), SVG_PATHSEG_LINETO_ABS (L), SVG_PATHSEG_CURVETO_CUBIC_ABS (C) and SVG_PATHSEG_CLOSEPATH (z).
Інтерфейс SVGPathElement : SVGElement, SVGTests, SVGLangSpace, SVGExternalResourcesRequired, SVGStylable, SVGTransformable, SVGAnimatedPathData { readonly attribute SVGAnimatedNumber pathLength; float getTotalLength(); SVGPoint getPointAtLength(in float distance); unsigned long getPathSegAtLength(in float distance); SVGPathSegClosePath createSVGPathSegClosePath(); SVGPathSegMovetoAbs createSVGPathSegMovetoAbs(in float x, in float y); SVGPathSegMovetoRel createSVGPathSegMovetoRel(in float x, in float y); SVGPathSegLinetoAbs createSVGPathSegLinetoAbs(in float x, in float y); SVGPathSegLinetoRel createSVGPathSegLinetoRel(in float x, in float y); SVGPathSegCurvetoCubicAbs createSVGPathSegCurvetoCubicAbs(in float x, in float y, in float x1, in float y1, in float x2, in float y2); SVGPathSegCurvetoCubicRel createSVGPathSegCurvetoCubicRel(in float x, in float y, in float x1, in float y1, in float x2, in float y2); SVGPathSegCurvetoQuadraticAbs createSVGPathSegCurvetoQuadraticAbs(in float x, in float y, in float x1, in float y1); SVGPathSegCurvetoQuadraticRel createSVGPathSegCurvetoQuadraticRel(in float x, in float y, in float x1, in float y1); SVGPathSegArcAbs createSVGPathSegArcAbs(in float x, in float y, in float r1, in float r2, in float angle, in boolean largeArcFlag, in boolean sweepFlag); SVGPathSegArcRel createSVGPathSegArcRel(in float x, in float y, in float r1, in float r2, in float angle, in boolean largeArcFlag, in boolean sweepFlag); SVGPathSegLinetoHorizontalAbs createSVGPathSegLinetoHorizontalAbs(in float x); SVGPathSegLinetoHorizontalRel createSVGPathSegLinetoHorizontalRel(in float x); SVGPathSegLinetoVerticalAbs createSVGPathSegLinetoVerticalAbs(in float y); SVGPathSegLinetoVerticalRel createSVGPathSegLinetoVerticalRel(in float y); SVGPathSegCurvetoCubicSmoothAbs createSVGPathSegCurvetoCubicSmoothAbs(in float x, in float y, in float x2, in float y2); SVGPathSegCurvetoCubicSmoothRel createSVGPathSegCurvetoCubicSmoothRel(in float x, in float y, in float x2, in float y2); SVGPathSegCurvetoQuadraticSmoothAbs createSVGPathSegCurvetoQuadraticSmoothAbs(in float x, in float y); SVGPathSegCurvetoQuadraticSmoothRel createSVGPathSegCurvetoQuadraticSmoothRel(in float x, in float y); };
SVG contains the following set of basic shape elements:
Mathematically, these shape elements are equivalent to a ‘path’ element that would construct the same shape. basic shapes may be stroked, filled and used as clip paths. All of the properties available for ‘path’ elements also apply to the basic shapes.
‘rect’ element defines a rectangle which is axis-aligned with the current user coordinate system. Rounded rectangles can be achieved by setting appropriate values for attributes ‘rx’ and ‘ry’.
Визначення атрибутів:
values used for the x- and y-axis rounded corner radii are determined implicitly if the ‘rx’ or ‘ry’ attributes (or both) are not specified, or are specified but with invalid values. values are also subject to clamping so that the lengths of the straight segments of the rectangle are never negative. effective values for ‘rx’ and ‘ry’ are determined by following these steps in order:
Mathematically, a ‘rect’ element can be mapped to an equivalent ‘path’ element as follows: (Note: all coordinate and length values are first converted into user space coordinates according to Units.)
Приклад rect01 shows a rectangle with sharp corners. ‘rect’ element is filled with yellow and stroked with navy.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Приклад rect01 - rectangle with sharp corners</desc>
<!-- Show outline of canvas using 'rect' element -->
<rect x="1" y="1" width="1198" height="398"
fill="none" stroke="blue" stroke-width="2"/>
<rect x="400" y="100" width="400" height="200"
fill="yellow" stroke="navy" stroke-width="10" />
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
Приклад rect02 shows two rounded rectangles. ‘rx’ specifies how to round the corners of the rectangles. Note that since no value has been specified for the ‘ry’ attribute, it will be assigned the same value as the ‘rx’ attribute.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Приклад rect02 - rounded rectangles</desc>
<!-- Show outline of canvas using 'rect' element -->
<rect x="1" y="1" width="1198" height="398"
fill="none" stroke="blue" stroke-width="2"/>
<rect x="100" y="100" width="400" height="200" rx="50"
fill="green" />
<g transform="translate(700 210) rotate(-30)">
<rect x="0" y="0" width="400" height="200" rx="50"
fill="none" stroke="purple" stroke-width="30" />
</g>
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
‘circle’ element defines a circle based on a center point and a radius.
Визначення атрибутів:
arc of a ‘circle’ element begins at the "3 o'clock" point on the radius and progresses towards the "9 o'clock" point. starting point and direction of the arc are affected by the user space transform in the same manner as the geometry елементу.
Приклад circle01 consists of a ‘circle’ element that is filled with red and stroked with blue.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Приклад circle01 - circle filled with red and stroked with blue</desc>
<!-- Show outline of canvas using 'rect' element -->
<rect x="1" y="1" width="1198" height="398"
fill="none" stroke="blue" stroke-width="2"/>
<circle cx="600" cy="200" r="100"
fill="red" stroke="blue" stroke-width="10" />
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
‘ellipse’ element defines an ellipse which is axis-aligned with the current user coordinate system based on a center point and two radii.
Визначення атрибутів:
arc of an ‘ellipse’ element begins at the "3 o'clock" point on the radius and progresses towards the "9 o'clock" point. starting point and direction of the arc are affected by the user space transform in the same manner as the geometry елементу.
Приклад ellipse01 below specifies the coordinates of the two ellipses in the user coordinate system established by the ‘viewBox’ attribute on the ‘svg’ element and the ‘transform’ attribute on the ‘g’ and ‘ellipse’ elements. Both ellipses use the default values of zero for the ‘cx’ and ‘cy’ attributes (the center of the ellipse). second ellipse is rotated.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Приклад ellipse01 - examples of ellipses</desc>
<!-- Show outline of canvas using 'rect' element -->
<rect x="1" y="1" width="1198" height="398"
fill="none" stroke="blue" stroke-width="2" />
<g transform="translate(300 200)">
<ellipse rx="250" ry="100"
fill="red" />
</g>
<ellipse transform="translate(900 200) rotate(-30)"
rx="250" ry="100"
fill="none" stroke="blue" stroke-width="20" />
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
‘line’ element defines a line segment that starts at one point and ends at another.
Визначення атрибутів:
Mathematically, a ‘line’ element can be mapped to an equivalent ‘path’ element as follows: (Note: all coordinate and length values are first converted into user space coordinates according to Units.)
Because ‘line’ elements are single lines and thus are geometrically one-dimensional, they have no interior; таким чином, ‘line’ elements are never filled (дивіться the ‘fill’ property).
Приклад line01 below specifies the coordinates of the five lines in the user coordinate system established by the ‘viewBox’ attribute on the ‘svg’ element. lines have different thicknesses.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Приклад line01 - lines expressed in user coordinates</desc>
<!-- Show outline of canvas using 'rect' element -->
<rect x="1" y="1" width="1198" height="398"
fill="none" stroke="blue" stroke-width="2" />
<g stroke="green" >
<line x1="100" y1="300" x2="300" y2="100"
stroke-width="5" />
<line x1="300" y1="300" x2="500" y2="100"
stroke-width="10" />
<line x1="500" y1="300" x2="700" y2="100"
stroke-width="15" />
<line x1="700" y1="300" x2="900" y2="100"
stroke-width="20" />
<line x1="900" y1="300" x2="1100" y2="100"
stroke-width="25" />
</g>
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
‘polyline’ element defines a set of connected straight line segments. Typically, ‘polyline’ elements define open shapes.
Визначення атрибутів:
Якщо an odd number of coordinates is provided, then the element is in error, with the same користувацький агент behavior as occurs with an incorrectly specified ‘path’ element.
Mathematically, a ‘polyline’ element can be mapped to an equivalent ‘path’ element as follows:
Приклад polyline01 below specifies a polyline in the user coordinate system established by the ‘viewBox’ attribute on the ‘svg’ element.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Приклад polyline01 - increasingly larger bars</desc>
<!-- Show outline of canvas using 'rect' element -->
<rect x="1" y="1" width="1198" height="398"
fill="none" stroke="blue" stroke-width="2" />
<polyline fill="none" stroke="blue" stroke-width="10"
points="50,375
150,375 150,325 250,325 250,375
350,375 350,250 450,250 450,375
550,375 550,175 650,175 650,375
750,375 750,100 850,100 850,375
950,375 950,25 1050,25 1050,375
1150,375" />
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
‘polygon’ element defines a closed shape consisting of a set of connected straight line segments.
Визначення атрибутів:
Якщо an odd number of coordinates is provided, then the element is in error, with the same користувацький агент behavior as occurs with an incorrectly specified ‘path’ element.
Mathematically, a ‘polygon’ element can be mapped to an equivalent ‘path’ element as follows:
Приклад polygon01 below specifies two polygons (a star and a hexagon) in the user coordinate system established by the ‘viewBox’ attribute on the ‘svg’ element.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Приклад polygon01 - star and hexagon</desc>
<!-- Show outline of canvas using 'rect' element -->
<rect x="1" y="1" width="1198" height="398"
fill="none" stroke="blue" stroke-width="2" />
<polygon fill="red" stroke="blue" stroke-width="10"
points="350,75 379,161 469,161 397,215
423,301 350,250 277,301 303,215
231,161 321,161" />
<polygon fill="lime" stroke="blue" stroke-width="10"
points="850,75 958,137.5 958,262.5
850,325 742,262.6 742,137.5" />
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
following is the Extended Backus-Naur Form (EBNF) for points specifications in ‘polyline’ and ‘polygon’ elements. following notation is used:
list-of-points:
wsp* coordinate-pairs? wsp*
coordinate-pairs:
coordinate-pair
| coordinate-pair comma-wsp coordinate-pairs
coordinate-pair:
coordinate comma-wsp coordinate
| coordinate negative-coordinate
coordinate:
number
number:
sign? integer-constant
| sign? floating-point-constant
negative-coordinate:
"-" integer-constant
| "-" floating-point-constant
comma-wsp:
(wsp+ comma? wsp*) | (comma wsp*)
comma:
","
integer-constant:
digit-sequence
floating-point-constant:
fractional-constant exponent?
| digit-sequence exponent
fractional-constant:
digit-sequence? "." digit-sequence
| digit-sequence "."
exponent:
( "e" | "E" ) sign? digit-sequence
sign:
"+" | "-"
digit-sequence:
digit
| digit digit-sequence
digit:
"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"
wsp:
(#x20 | #x9 | #xD | #xA)+
Інтерфейс SVGRectElement : SVGElement, SVGTests, SVGLangSpace, SVGExternalResourcesRequired, SVGStylable, SVGTransformable { readonly attribute SVGAnimatedLength x; readonly attribute SVGAnimatedLength y; readonly attribute SVGAnimatedLength width; readonly attribute SVGAnimatedLength height; readonly attribute SVGAnimatedLength rx; readonly attribute SVGAnimatedLength ry; };
Інтерфейс SVGCircleElement : SVGElement, SVGTests, SVGLangSpace, SVGExternalResourcesRequired, SVGStylable, SVGTransformable { readonly attribute SVGAnimatedLength cx; readonly attribute SVGAnimatedLength cy; readonly attribute SVGAnimatedLength r; };
Інтерфейс SVGEllipseElement : SVGElement, SVGTests, SVGLangSpace, SVGExternalResourcesRequired, SVGStylable, SVGTransformable { readonly attribute SVGAnimatedLength cx; readonly attribute SVGAnimatedLength cy; readonly attribute SVGAnimatedLength rx; readonly attribute SVGAnimatedLength ry; };
Інтерфейс SVGLineElement : SVGElement, SVGTests, SVGLangSpace, SVGExternalResourcesRequired, SVGStylable, SVGTransformable { readonly attribute SVGAnimatedLength x1; readonly attribute SVGAnimatedLength y1; readonly attribute SVGAnimatedLength x2; readonly attribute SVGAnimatedLength y2; };
SVGAnimatedPoints interface supports elements which have a ‘points’ attribute which holds a list of coordinate values and which support the ability to animate that attribute.
Additionally, the ‘points’ attribute on
the original element accessed via the XML DOM (тобто, using the getAttribute()
method call) will reflect any changes made to points.
Інтерфейс SVGAnimatedPoints {
readonly attribute SVGPointList points;
readonly attribute SVGPointList animatedPoints;
};
Інтерфейс SVGPolylineElement : SVGElement, SVGTests, SVGLangSpace, SVGExternalResourcesRequired, SVGStylable, SVGTransformable, SVGAnimatedPoints { };
Інтерфейс SVGPolygonElement : SVGElement, SVGTests, SVGLangSpace, SVGExternalResourcesRequired, SVGStylable, SVGTransformable, SVGAnimatedPoints { };
Text that is to be rendered as part of an фрагменту документу SVG is specified using the ‘text’ element. characters to be drawn are expressed as XML character data ([XML10], section 2.4) inside the ‘text’ element.
SVG's ‘text’ elements are rendered like other графічний елементи. Thus, coordinate system transformations, painting, clipping and masking features apply to ‘text’ elements in the same way as they apply to shapes such as paths and rectangles.
Each ‘text’ element causes a single string of text to be rendered. SVG performs no automatic line breaking or word wrapping. To achieveефект of multiple lines of text, use one of the following methods:
text strings within ‘text’ elements can be rendered in a straight line or rendered along the outline of a ‘path’ element. SVG supports the following international text processing features for both straight line text and text on a path:
( layout rules for straight line text are described in Text layout. layout rules for text on a path are described in Text on a path layout rules.)
Because SVG text is packaged as XML character data:
Multi-language SVG content is possible by substituting different text strings based on the user's preferred language.
For accessibility reasons, it is recommended that text which is included in a document have appropriate semantic markup to indicate its function. Дивіться SVG accessibility guidelines for more information.
In XML [XML10], textual content is defined in terms of a sequence of XML characters, where each character is defined by a particular Unicode code point [UNICODE]. Fonts, on the other hand, consist of a collection of glyphs and other associated information, such as font tables. A glyph is a presentable form of one or more characters (or a part of a character in some cases). Each glyph consists of some sort of identifier (in some cases a string, in other cases a number) along with drawing instructions for rendering that particular glyph.
In many cases, there is a one-to-one mapping of Unicode characters (тобто, Unicode code points) to glyphs in a font. For example, it is common for a font designed for Latin languages (where the term Latin is used for European languages such as English with alphabets similar to and/or derivative to the Latin language) to contain a single glyph for each of the standard ASCII characters (тобто, A-to-Z, a-to-z, 0-to-9, plus the various punctuation characters found in ASCII). Thus, in most situations, the string "XML", which consists of three Unicode characters, would be rendered by the three glyphs corresponding to "X", "M" and "L", respectively.
In various other cases, however, there is not a strict one-to-one mapping of Unicode characters to glyphs. Some of the circumstances when the mapping is not one-to-one:
In many situations, the algorithms for mapping from characters to glyphs are system-dependent, resulting in the possibility that the rendering of text might be (usually slightly) different when viewed in different user environments. Якщо the author of SVG content requires precise selection of fonts and glyphs, then the recommendation is that the necessary fonts (potentially subsetted to include only the glyphs needed for the given document) be available either as SVG fonts embedded within the SVG content or as WebFonts ([CSS2], section 15.1) posted at the same Web location as the SVG content.
Throughout this chapter, the term character shall be equivalent to the definition of a character in XML [XML10].
A font consists of a collection of glyphs together with the information (the font tables) necessary to use those glyphs to present characters on some medium. combination of the collection of glyphs and the font tables is called the font data. font tables include the information necessary to map characters to glyphs, to determine the size of glyph areas and to position the glyph area. Each font table consists of one or more font characteristics, such as the font-weight and font-style.
geometric font characteristics are expressed in a coordinate system based on the EM box. ( EM is a relative measure of the height of the glyphs in the font; see Coordinate units on the em square; in [CSS2], section 15.4.3.) box 1 EM high and 1 EM wide is called the design space. This space is given a geometric coordinates by sub-dividing the EM into a number of units per em.
Note: Units per em is a font characteristic. A typical value for units per em is 1000 or 2048.
coordinate space of the EM box is called the design space coordinate system. For scalable fonts, the curves and lines that are used to draw a glyph are represented using this coordinate system.
Note: Most often, the (0,0) point in this coordinate system is positioned on the left edge of the EM box, but not at the bottom left corner. Y coordinate of the bottom of a roman capital letter is usually zero. And the descenders on lowercase roman letters have negative coordinate values.
SVG assumes that the font tables will provide at least three font characteristics: an ascent, a descent and a set of baseline-tables. ascent is the distance to the top of the EM box from the (0,0) point of the font; the descent is the distance to the bottom of the EM box from the (0.0) point of the font. baseline-table is explained below.
Note: Within an OpenType font, for horizontal writing-modes, the ascent and descent are given by the sTypoAscender and sTypoDescender entries in the OS/2 table. For vertical writing-modes, the descent (the distance, in this case from the (0,0) point to the left edge of the glyph) is normally zero because the (0,0) point is on the left edge. ascent for vertical writing-modes is either 1 em or is specified by the ideographic top baseline value in the OpenType Base table for vertical writing-modes.
In horizontal writing-modes, the glyphs of a given script are positioned so that a particular point on each glyph, the alignment-point, is aligned with the alignment-points of the other glyphs in that script. glyphs of different scripts, for example, Western, Northern Indic and Far-Eastern scripts, are typically aligned at different points on the glyph. For example, Western glyphs are aligned on the bottoms of the capital letters, northern indic glyphs are aligned at the top of a horizontal stroke near the top of the glyphs and far-eastern glyphs are aligned either at the bottom or center of the glyph. Within a script and within a line of text having a single font-size, the sequence of alignment-points defines, in the inline- progression-direction, a geometric line called a baseline. Western and most other alphabetic and syllabic glyphs are aligned to an "alphabetic" baseline, the northern indic glyphs are aligned to a "hanging" baseline and the far-eastern glyphs are aligned to an "ideographic" baseline.
A baseline-table specifies the position of one or more baselines in the design space coordinate system. function of the baseline table is to facilitate the alignment of different scripts with respect to each other when they are mixed on the same text line. Because the desired relative alignments may depend on which script is dominant in a line (or block), there may be a different baseline table for each script. In addition, different alignment positions are needed for horizontal and vertical writing modes. Therefore, the font may have a set of baseline tables: typically, one or more for horizontal writing-modes and zero or more for vertical writing-modes.
Note: Some fonts may not have values for the baseline tables. Heuristics are suggested for approximating the baseline tables when a given font does not supply baseline tables.
SVG further assumes that for each glyph in the font data for a font, there are two width values, two alignment-baselines and two alignment-points, one each for horizontal writing-modes and the other for vertical writing-modes. (Even though it is specified as a width, for vertical writing-modes the width is used in the vertical direction.) script to which a glyph belongs determines an alignment-baseline to which the glyph is to be aligned. inline-progression-direction position of the alignment-point is on the start-edge of the glyph.
Properties related to baselines are described below under Baseline alignment properties.
In addition to the font characteristics required above, a font may also supply substitution and positioning tables that can бути використано by a formatter to re-order, combine and position a sequence of glyphs to make one or more composite glyphs. combination may be as simple as a ligature, or as complex as an indic syllable which combines, usually with some re-ordering, multiple consonants and vowel glyphs.
‘text’ element defines a графічний елемент consisting of text. XML character data within the ‘text’ element, along with relevant attributes and properties and character-to-glyph mapping tables within the font itself, define the glyphs to be rendered. ( Дивіться Characters and their corresponding glyphs.) attributes and properties on the ‘text’ element indicate such things as the writing direction, font specification and painting attributes which describe how exactly to render the characters. Subsequent sections of this chapter describe the relevant text-specific attributes and properties, particular text layout and bidirectionality.
Since ‘text’ elements are rendered using the same rendering methods as other графічний елементи, all of the same coordinate system transformations, painting, clipping and masking features that apply to shapes such as paths and rectangles also apply to ‘text’ elements.
It is possible to apply a gradient, pattern, clipping path, mask or filter to text. When one of these facilities is applied to text and keyword 'objectBoundingBox' is used (дивіться Object bounding box units) to specify a graphical effect relative to the "object bounding box", then the object bounding box units are computed relative to the entire ‘text’ element in all cases, even when different effects are applied to different ‘tspan’ elements within the same ‘text’ element.
‘text’ element renders its first glyph (after bidirectionality reordering) at the initial current text position, which is established by the ‘x’ and ‘y’ attributes on the ‘text’ element (with possible adjustments due to the значення the ‘text-anchor’ property, the presence of a ‘textPath’ element containing the first character, and/or an ‘x’, ‘y’, ‘dx’ or ‘dy’ attributes on a ‘tspan’, ‘tref’ or ‘altGlyph’ element which contains the first character). After the glyph(s) corresponding to the given character is(are) rendered, the current text position is updated for the next character. In the simplest case, the new current text position is the previous current text position plus the glyphs' advance value (horizontal or vertical). Дивіться text layout for a description of glyph placement and glyph advance.
Визначення атрибутів:
Приклад text01 below contains the text string "Hello, out there" which will be rendered onto the canvas using the Verdana font family with the glyphs filled with the color blue.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="3cm" viewBox="0 0 1000 300"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Приклад text01 - 'Hello, out there' in blue</desc>
<text x="250" y="150"
font-family="Verdana" font-size="55" fill="blue" >
Hello, out there
</text>
<!-- Show outline of canvas using 'rect' element -->
<rect x="1" y="1" width="998" height="298"
fill="none" stroke="blue" stroke-width="2" />
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
Within a ‘text’ element, text and font properties and the current text position can be adjusted with absolute or relative coordinate values by including a ‘tspan’ element.
Визначення атрибутів:
‘x’, ‘y’, ‘dx’, ‘dy’ and ‘rotate’ on the ‘tspan’ element are useful in high-end typography scenarios where individual glyphs require exact placement. These attributes are useful for minor positioning adjustments between characters or for major positioning adjustments, such as moving the current text position to a new location to achieve the visual effect of a new line of text. Multi-line ‘text’ elements are possible by defining different ‘tspan’ elements for each line of text, with attributes ‘x’, ‘y’, ‘dx’ and/or ‘dy’ defining the position of each ‘tspan’. (An advantage of such an approach is that users will be able to perform multi-line text selection.)
In situations where micro-level positioning adjustment are necessary for advanced typographic control, the SVG content designer needs to ensure that the necessary font will be available for all viewers of the document (тобто, package up the necessary font data in the form of an SVG font or an alternative WebFont format which is stored at the same Web site as the SVG content) and that the viewing software will process the font in the expected way (the capabilities, characteristics and font layout mechanisms vary greatly from system to system). Якщо the SVG content contains ‘x’, ‘y’, ‘dx’ or ‘dy’ attribute values which are meant to correspond to a particular font processed by a particular set of viewing software and either of these requirements is not met, then the text might display with poor quality.
following additional rules apply to attributes ‘x’, ‘y’, ‘dx’, ‘dy’ and ‘rotate’ when they contain a list of numbers:
<tspan dx="11 12 13 14 15 0 21 22 23 0 31 32 33 34 35 36">Latin and Hebrew</tspan>and that the word "Hebrew" will be drawn right-to-left. First, the character data and the corresponding values in the ‘dx’ list will be reordered, such that the text string will be "Latin and werbeH" and the list of values for the ‘dx’ attribute will be "11 12 13 14 15 0 21 22 23 0 36 35 34 33 32 31". After this re-ordering, the glyphs corresponding to the characters will be positioned using standard left-to-right layout rules.
following examples show basic use of the ‘tspan’ element.
Приклад tspan01 uses a ‘tspan’ element to indicate that the word "not" is to use a bold font and have red fill.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="3cm" viewBox="0 0 1000 300"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Приклад tspan01 - using tspan to change visual attributes</desc>
<g font-family="Verdana" font-size="45" >
<text x="200" y="150" fill="blue" >
You are
<tspan font-weight="bold" fill="red" >not</tspan>
a banana.
</text>
</g>
<!-- Show outline of canvas using 'rect' element -->
<rect x="1" y="1" width="998" height="298"
fill="none" stroke="blue" stroke-width="2" />
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
Приклад tspan02 uses the ‘dx’ and ‘dy’ attributes on the ‘tspan’ element to adjust the current text position horizontally and vertically for particular text strings within a ‘text’ element.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="3cm" viewBox="0 0 1000 300"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Приклад tspan02 - using tspan's dx and dy attributes
for incremental positioning adjustments</desc>
<g font-family="Verdana" font-size="45" >
<text x="200" y="150" fill="blue" >
But you
<tspan dx="2em" dy="-50" font-weight="bold" fill="red" >
are
</tspan>
<tspan dy="100">
a peach!
</tspan>
</text>
</g>
<!-- Show outline of canvas using 'rect' element -->
<rect x="1" y="1" width="998" height="298"
fill="none" stroke="blue" stroke-width="2" />
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
Приклад tspan03 uses the ‘x’ and ‘y’ attributes on the ‘tspan’ element to establish a new absolute current text position for each glyph to be rendered. example shows two lines of text within a single ‘text’ element. Because both lines of text are within the same ‘text’ element, the user will be able to select through both lines of text and copy the text to the system clipboard in користувацькі агенти that support text selection and clipboard operations.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="3cm" viewBox="0 0 1000 300"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Приклад tspan03 - using tspan's x and y attributes
for multiline text and precise glyph positioning</desc>
<g font-family="Verdana" font-size="45" >
<text fill="rgb(255,164,0)" >
<tspan x="300 350 400 450 500 550 600 650" y="100">
Cute and
</tspan>
<tspan x="375 425 475 525 575" y="200">
fuzzy
</tspan>
</text>
</g>
<!-- Show outline of canvas using 'rect' element -->
<rect x="1" y="1" width="998" height="298"
fill="none" stroke="blue" stroke-width="2" />
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
Приклад tspan04 uses the ‘rotate’ attribute on the ‘tspan’ element to rotate the glyphs to be rendered. This example shows a single text string in a ‘tspan’ element that contains more characters than the number of values specified in the ‘rotate’ attribute. In this case the last value specified in the ‘rotate’ attribute of the ‘tspan’ must be applied to the remaining characters in the string.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="3cm" viewBox="0 0 1000 300"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>
Приклад tspan04 - number of rotate values is less than the number of
characters in the string.
</desc>
<text font-family="Verdana" font-size="55" fill="blue" >
<tspan x="250" y="150" rotate="-30,0,30">
Hello, out there
</tspan>
</text>
<!-- Show outline of canvas using 'rect' element -->
<rect x="1" y="1" width="998" height="298"
fill="none" stroke="blue" stroke-width="2" />
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
Приклад tspan05 specifies the ‘rotate’ attribute on the ‘text’ element and on all but one of the child ‘tspan’ elements to rotate the glyphs to be rendered. example demonstrates the propagation of the ‘rotate’ attribute.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 500 120"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>
Приклад tspan05 - propagation of rotation values to nested tspan elements.
</desc>
<text id="parent" font-family="Arial, sans-serif" font-size="32" fill="red" x="40" y="40"
rotate="5,15,25,35,45,55">
Not
<tspan id="child1" rotate="-10,-20,-30,-40" fill="orange">
all characters
<tspan id="child2" rotate="70,60,50,40,30,20,10" fill="yellow">
in
<tspan id="child3">
the
</tspan>
</tspan>
<tspan id="child4" fill="orange" x="40" y="90">
text
</tspan>
have a
</tspan>
<tspan id="child5" rotate="-10" fill="blue">
specified
</tspan>
rotation
</text>
<!-- Show outline of canvas using 'rect' element -->
<rect x="1" y="1" width="498" height="118" fill="none"
stroke="blue" stroke-width="2" />
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
Rotation of red text inside the ‘text’ element:
Rotation of the orange text inside the "child1" ‘tspan’ element:
Rotation of the yellow text inside the "child2" ‘tspan’ element:
Rotation of the blue text inside the "child5" ‘tspan’ element:
following diagram illustrates how the rotation values propagate to ‘tspan’ elements nested withing a ‘text’ element
textual content for a ‘text’ can be either character data directly embedded within the ‘text’ element or the character data content of a referenced element, where the referencing is specified with a ‘tref’ element.
Визначення атрибутів:
All character data within the referenced element, including character data enclosed within additional markup, will be rendered.
‘x’, ‘y’, ‘dx’, ‘dy’ and ‘rotate’ attributes have the same meanings as for the ‘tspan’ element. attributes are applied as if the ‘tref’ element was replaced by a ‘tspan’ with the referenced character data (stripped of all supplemental markup) embedded within the hypothetical ‘tspan’ element.
Приклад tref01 shows how to use character data from a different element as the character data for a given ‘tspan’ element. first ‘text’ element (with id="ReferencedText") will not draw because it is part of a ‘defs’ element. second ‘text’ element draws the string "Inline character data". third ‘text’ element draws the string "Reference character data" because it includes a ‘tref’ element which is a reference to element "ReferencedText", and that element's character data is "Referenced character data".
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="3cm" viewBox="0 0 1000 300" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<text id="ReferencedText">
Referenced character data
</text>
</defs>
<desc>Приклад tref01 - inline vs reference text content</desc>
<text x="100" y="100" font-size="45" fill="blue" >
Inline character data
</text>
<text x="100" y="200" font-size="45" fill="red" >
<tref xlink:href="#ReferencedText"/>
</text>
<!-- Show outline of canvas using 'rect' element -->
<rect x="1" y="1" width="998" height="298"
fill="none" stroke="blue" stroke-width="2" />
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
This section описує the text layout features supported by SVG, which includes support for various international writing directions, such as left-to-right (тобто, Latin scripts) and bidirectional (тобто, Hebrew or Arabic) and vertical (тобто, Asian scripts). descriptions in this section assume straight line text (тобто, text that is either strictly horizontal or vertical with respect to the current user coordinate system). Subsequent sections describe the supplemental layout rules for text on a path.
SVG does not provide for automatic line breaks or word wrapping, which makes internationalized text layout for SVG relatively simpler than it is for languages which support formatting of multi-line text blocks.
For each ‘text’ element, the SVG користувацький агент determines the current reference orientation. For standard horizontal or vertical text (тобто, no text-on-a-path), the reference orientation is the vector pointing towards negative infinity in Y within the current user coordinate system. (Note: in the початкова координатна система, the reference orientation is up.) For text on a path, the reference orientation is reset with each character.
Based on the reference orientation and the value for property ‘writing-mode’, the SVG користувацький агент determines the current inline-progression-direction. For left-to-right text, the inline-progression-direction points 90 degrees clockwise from the reference orientation vector. For right-to-left text, the inline progression points 90 degrees counter-clockwise from the reference orientation vector. For top-to-bottom text, the inline-progression-direction points 180 degrees from the reference orientation vector.
Based on the reference orientation and the value for property ‘writing-mode’, the SVG користувацький агент determines the current block-progression-direction. For left-to-right and right-to-left text, the block-progression-direction points 180 degrees from the reference orientation vector because the only available horizontal ‘writing-mode’s are lr-tb and rl-tb. For top-to-bottom text, the block-progression-direction always points 90 degrees counter-clockwise from the reference orientation vector because the only available top-to-bottom ‘writing-mode’ is tb-rl.
shift direction is the direction towards which the baseline table moves due to positive values for property ‘baseline-shift’. shift direction is such that a positive value shifts the baseline table towards the topmost entry in the parent's baseline table.
In processing a given ‘text’ element, the SVG користувацький агент keeps track of the current text position. initial current text position is established by the ‘x’ and ‘y’ attributes on the ‘text’ element.
current text position is adjusted after each glyph to establish a new current text position at which the next glyph shall be rendered. adjustment to the current text position is based on the current inline-progression-direction, glyph-specific advance values corresponding to the glyph orientation of the glyph just rendered, kerning tables in the font and the current values of various attributes and properties, such as the spacing properties and any ‘x’, ‘y’, ‘dx’ and ‘dy’ attributes on ‘text’, ‘tspan’, ‘tref’ or ‘altGlyph’ elements. Якщо a glyph does not provide explicit advance values corresponding to the current glyph orientation, then an appropriate approximation should бути використано. For vertical text, a suggested approximation is the sum of the ascent and descent values for the glyph. Another suggested approximation for an advance value for both horizontal and vertical text is the size of an em (дивіться units-per-em).
For each glyph to be rendered, the SVG користувацький агент determines an appropriate alignment-point on the glyph which will be placed exactly at the current text position. alignment-point is determined based on glyph cell metrics in the glyph itself, the current inline-progression-direction and the glyph orientation relative to the inline-progression-direction. For most uses of Latin text (тобто, writing-mode:lr, text-anchor:start and alignment-baseline:baseline) the alignment-point in the glyph will be the intersection of left edge of the glyph cell (or some other glyph-specific x-координата indicating a left-side origin point) with the Latin baseline of the glyph. For many cases with top-to-bottom vertical text layout, the reference point will be either a glyph-specific origin point based on the set of vertical baselines for the font or the intersection of the center of the glyph with its top line (дивіться Top Baseline; in [CSS2], section 15.4.18). Якщо a glyph does not provide explicit origin points corresponding to the current glyph orientation, then an appropriate approximation should бути використано, such as the intersection of the left edge of the glyph with the appropriate horizontal baseline for the glyph or intersection of the top edge of the glyph with the appropriate vertical baseline. Якщо baseline tables are not available, користувацькі агенти should establish baseline tables that reflect common practice.
Adjustments to the current text position are either absolute position adjustments or relative position adjustments. An absolute position adjustment occurs in the following circumstances:
All other position adjustments to the current text position are relative position adjustments.
Each absolute position adjustment defines a new text chunk. Absolute position adjustments impact text layout in the following ways:
following additional rules apply to ligature formation:
‘writing-mode’ property specifies whether the initial inline-progression-direction for a ‘text’ element shall be left-to-right, right-to-left, or top-to-bottom. ‘writing-mode’ property applies only to ‘text’ elements; the property is ignored for ‘tspan’, ‘tref’, ‘altGlyph’ and ‘textPath’ sub-elements. (Note that the inline-progression-direction can change within a ‘text’ element due to the Unicode bidirectional algorithm and properties ‘direction’ and ‘unicode-bidi’. For more on bidirectional text, see Relationship with bidirectionality.)
| Value: | lr-tb | rl-tb | tb-rl | lr | rl | tb | inherit |
| Initial: | lr-tb |
| Applies to: | ‘text’ elements |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | no |
In some cases, it is required to alter the orientation of a sequence of characters relative to the inline-progression-direction. requirement is particularly applicable to vertical layouts of East Asian documents, where sometimes narrow-cell Latin text is to be displayed horizontally and other times vertically.
Two properties control the glyph orientation relative to the reference orientation for each of the two possible inline-progression-directions. ‘glyph-orientation-vertical’ controls glyph orientation when the inline-progression-direction is vertical. ‘glyph-orientation-horizontal’ controls glyph orientation when the inline-progression-direction is horizontal.
| Value: | auto | <angle> | inherit |
| Initial: | auto |
| Applies to: | text content elements |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | no |
Fullwidth ideographic and fullwidth Latin text will be set with a glyph-orientation of 0-degrees.
Ideographic punctuation and other ideographic characters having alternate horizontal and vertical forms will use the vertical form of the glyph.
Text which is not fullwidth will be set with a glyph-orientation of 90-degrees.
This reorientation rule applies only to the first-level non-ideographic text. All further embedding of writing-modes or bidi processing will be based on the first-level rotation.
NOTE:
This is equivalent to having set the non-ideographic text string horizontally honoring the bidi-rule, then rotating the resultant sequence of inline-areas (one area for each change of glyph direction) 90-degrees clockwise.
It should be noted that text set in this "rotated" manner may contain ligatures or other glyph combining and reordering common to the language and script. (This "rotated" presentation form does not disable auto-ligature formation or similar context-driven variations.)
determination of which characters should be auto-rotated may vary across користувацькі агенти. determination is based on a complex interaction between country, language, script, character properties, font, and character context. It is suggested that one consult the Unicode TR 11 and the various JIS or other national standards.
This property is applied only to text written in a vertical ‘writing-mode’.
glyph orientation affects the amount that the current text position advances as each glyph is rendered. When the inline-progression-direction is vertical and the ‘glyph-orientation-vertical’ results in an orientation angle that is a multiple of 180 degrees, then the current text position is incremented according to the vertical metrics of the glyph. Otherwise, if the ‘glyph-orientation-vertical’ results in an orientation angle that is not a multiple of 180 degrees, then the current text position is incremented according to the horizontal metrics of the glyph.
text layout diagrams in this section use the following symbols:
| wide-cell glyph (e.g. Han) which is the n-th glyph in the text run | |
| narrow-cell glyph (e.g. Latin) which is the n-th glyph in the text run |
orientation which the above symbols assume in the diagrams corresponds to the orientation that the Unicode characters they represent are intended to assume when rendered in the користувацький агент. Spacing between the glyphs in the diagrams is usually symbolic, unless intentionally changed to make a point.
diagrams below illustrate different uses of ‘glyph-orientation-vertical’. diagram on the left shows the result of the mixing of full-width ideographic glyphs with narrow-cell Latin glyphs when ‘glyph-orientation-vertical’ for the Latin characters is either auto or 90. diagram on the right show the result of mixing full-width ideographic glyphs with narrow-cell Latin glyphs when Latin glyphs are specified to have a ‘glyph-orientation-vertical’ of 0.
![]()
![]()
![]()
| Value: | <angle> | inherit |
| Initial: | 0deg |
| Applies to: | text content elements |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | no |
This property is applied only to text written in a horizontal ‘writing-mode’.
glyph orientation affects the amount that the current text position advances as each glyph is rendered. When the reference orientation direction is horizontal and the ‘glyph-orientation-horizontal’ results in an orientation angle that is a multiple of 180 degrees, then the current text position is incremented according to the horizontal metrics of the glyph. Otherwise, if the ‘glyph-orientation-horizontal’ results in an orientation angle that is not a multiple of 180 degrees, then the current text position is incremented according to the vertical metrics of the glyph.
characters in certain scripts are written from right to left. In some documents, in particular those written with the Arabic or Hebrew script, and in some mixed-language contexts, text in a single line may appear with mixed directionality. This phenomenon is called bidirectionality, or "bidi" for short.
Unicode standard ([UNICODE], specifically [UAX9]) defines a complex algorithm for determining the proper directionality of text. algorithm consists of an implicit part based on character properties, as well as explicit controls for embeddings and overrides. SVG користувацький агент applies this bidirectional algorithm when determining the layout of characters within a text content block element.
‘direction’ and ‘unicode-bidi’ properties allow authors to override the inherent directionality of the content characters and thus explicitly control how the elements and attributes of a document language map to this algorithm. These two properties are applicable to all characters whose glyphs are perpendicular to the inline-progression-direction.
In many cases, the bidirectional algorithm from Unicode [UNICODE] produces the desired result automatically, and in such cases the author does not need to use these properties. For other cases, such as when using right-to-left languages, it may be sufficient to add the ‘direction’ property to the rootmost ‘svg’ element, and allow that direction to inherit to all text elements, as in the following example (which may бути використано as a template):
<svg xmlns="http://www.w3.org/2000/svg"
width="100%" height="100%" viewBox="0 0 400 400"
direction="rtl" xml:lang="fa">
<title direction="ltr" xml:lang="en">Right-to-left Text</title>
<desc direction="ltr" xml:lang="en">
A simple example for using the 'direction' property in documents
that predominantly use right-to-left languages.
</desc>
<text x="200" y="200" font-size="20">داستان SVG 1.1 SE طولا ني است.</text>
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
Below is another example, where where implicit bidi reordering is not sufficient:
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
width="100%" height="100%" viewBox="0 0 400 400"
direction="rtl" xml:lang="he">
<title direction="ltr" xml:lang="en">Right-to-left Text</title>
<desc direction="ltr" xml:lang="en">
An example for using the 'direction' and 'unicode-bidi' properties
in documents that predominantly use right-to-left languages.
</desc>
<text x="200" y="200" font-size="20"> כתובת
MAC:‏
<tspan direction="ltr" unicode-bidi="embed">00-24-AF-2A-55-FC</tspan>
</text>
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
Within text content elements, the alignment of text with regards to the ‘text-anchor’ property is determined by the значення the ‘direction’ property. For example, given a ‘text’ element with a ‘text-anchor’ значення "end", for a ‘direction’ значення "ltr", the text will extend to the left of the position of the ‘text’ element's ‘x’ attribute value, while for ‘direction’ значення "rtl", the text will extend to the right of the position of the ‘text’ element's ‘x’ attribute value.
A more complete discussion of bidirectionality can be found in the Text direction section of CSS 2 ([CSS2], section 9.10).
processing model for bidirectional text is as follows. користувацький агент processes the characters which are provided in logical order (тобто, the order the characters appear in the original document, either via direct inclusion or via indirect reference due a ‘tref’ element). користувацький агент determines the set of independent blocks within each of which it should apply the Unicode bidirectional algorithm. Each text chunk represents an independent block of text. Additionally, any change in glyph orientation due to processing of properties ‘glyph-orientation-horizontal’ or ‘glyph-orientation-vertical’ will subdivide the independent blocks of text further. After processing the Unicode bidirectional algorithm and properties ‘direction’ and ‘unicode-bidi’ on each of the independent text blocks, the користувацький агент will have a potentially re-ordered list of characters which are now in left-to-right rendering order. Simultaneous with re-ordering of the characters, the dx, dy and rotate attributes on the ‘tspan’ and ‘tref’ elements are also re-ordered to maintain the original correspondence between characters and attribute values. While kerning or ligature processing might be font-specific, the preferred model is that kerning and ligature processing occurs between combinations of characters or glyphs after the characters have been re-ordered.
| Value: | ltr | rtl | inherit |
| Initial: | ltr |
| Applies to: | text content elements |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | no |
This property specifies the base writing direction of text and the direction of embeddings and overrides (дивіться ‘unicode-bidi’) for the Unicode bidirectional algorithm. For the ‘direction’ property to have any effect on an element that does not by itself establish a new text chunk (such as a ‘tspan’ element without absolute position adjustments due to ‘x’ or ‘y’ attributes), the ‘unicode-bidi’ property's value must be embed or bidi-override.
Except for any additional information provided in this specification, the normative definition of the ‘direction’ property is in CSS2 ([CSS2], section 9.10).
‘direction’ property applies only to glyphs oriented perpendicular to the inline-progression-direction, which includes the usual case of horizontally-oriented Latin or Arabic text and the case of narrow-cell Latin or Arabic characters rotated 90 degrees clockwise relative to a top-to-bottom inline-progression-direction.
| Value: | normal | embed | bidi-override | inherit |
| Initial: | normal |
| Applies to: | text content elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | no |
Except for any additional information provided in this specification, the normative definition of the ‘unicode-bidi’ property is in CSS2 ([CSS2], section 9.10).
glyphs associated with the characters within a ‘text’ element are rendered in the logical order of the characters in the original document, independent of any re-ordering necessary to implement bidirectionality. Thus, for text that goes right-to-left visually, the glyphs associated with the rightmost character are rendered before the glyphs associated with the other characters.
Additionally, each distinct glyph is rendered in its entirety (тобто, it is filled and stroked as specified by the ‘fill’ and ‘stroke’ properties) before the next glyph gets rendered.
‘text-anchor’ property is used to align (start-, middle- or end-alignment) a string of text relative to a given point.
‘text-anchor’ property is applied to each individual text chunk within a given ‘text’ element. Each text chunk has an initial current text position, which represents the point in the user coordinate system resulting from (depending on context) application of the ‘x’ and ‘y’ attributes on the ‘text’ element, any ‘x’ or ‘y’ attribute values on a ‘tspan’, ‘tref’ or ‘altGlyph’ element assigned explicitly to the first rendered character in a text chunk, or determination of the initial current text position for a ‘textPath’ element.
| Value: | start | middle | end | inherit |
| Initial: | start |
| Applies to: | text content elements |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
Values have the following meanings:
An overview of baseline alignment and baseline tables can be found above in Fonts, font tables and baselines.
One of the characteristics of international text is that there are different baselines (different alignment points) for glyphs in different scripts. For example, in horizontal writing, ideographic scripts, such as Han Ideographs, Katakana, Hiragana, and Hangul, alignment occurs with a baseline near the bottoms of the glyphs; alphabetic based scripts, such as Latin, Cyrillic, Hebrew, Arabic, align a point that is the bottom of most glyphs, but some glyphs descend below the baseline; and Indic based scripts are aligned at a point that is near the top of the glyphs.
When different scripts are mixed on a line of text, an adjustment must be made to ensure that the glyphs in the different scripts are aligned correctly with one another. OpenType [OPENTYPE] fonts have a Baseline table (BASE) [OPENTYPE-BASETABLE] that specifies the offsets of the alternative baselines from the current baseline.
SVG uses a similar baseline table model that assumes one script (at one font-size) is the "dominant run" during processing of a ‘text’ element; that is, all other baselines are defined in relation to this dominant run. baseline of the script with the dominant run is called the dominant baseline. So, for example, if the dominant baseline is the alphabetic baseline, there will be offsets in the baseline table for the alternate baselines, such as the ideographic baseline and the Indic baseline. There will also be an offset for the math baseline which is used for some math fonts. Note that there are separate baseline tables for horizontal and vertical writing-modes. offsets in these tables may be different for horizontal and vertical writing.
baseline table established at the start of processing of a ‘text’ element is called the dominant baseline table.
Because the значення the ‘font-family’ property is a list of fonts, to insure a consistent choice of baseline table we define the nominal font in a font list as the first font in the list for which a glyph is available. This is the first font that could contain a glyph for each character encountered. (For this definition, glyph data is assumed to be present if a font substitution is made or if the font is synthesized.) This definition insures a content independent determination of the font and baseline table that is to бути використано.
значення the ‘font-size’ property on the ‘text’ element establishes the dominant baseline table font size.
model assumes that each glyph has a 'alignment-baseline' value which specifies the baseline with which the glyph is to be aligned. ( 'alignment-baseline' is called the "Baseline Tag" in the OpenType baseline table description.) initial значення the ‘alignment-baseline’ property uses the baseline identifier associated with the given glyph. Alternate values for ‘alignment-baseline’ can be useful for glyphs such as a "*" which are ambiguous with respect to script membership.
model assumes that the font from which the glyph is drawn also has a baseline table, the font baseline table. This baseline table has offsets in units-per-em from the (0,0) point to each of the baselines the font knows about. In particular, it has the offset from the glyph's (0,0) point to the baseline identified by the 'alignment-baseline'.
offset values in the baseline table are in "design units" which means fractional units of the EM. CSS calls these "units-per-em" ([CSS2], section 15.3.4). Thus, the current ‘font-size’ is used to determine the actual offset from the dominant baseline to the alternate baselines.
glyph is aligned so that its baseline identified by its 'alignment-baseline' is aligned with the baseline with the same name from the dominant baseline table.
offset from the dominant baseline of the parent to the baseline identified by the 'alignment-baseline' is computed using the dominant baseline table and dominant baseline table font size. font baseline table and font size applicable to the glyph are used to compute the offset from the identified baseline to the (0,0) point of the glyph. This second offset is subtracted from the first offset to get the position of the (0,0) point in the shift direction. Both offsets are computed by multiplying the baseline value from the baseline table times the appropriate font size value.
Якщо the 'alignment-baseline' identifies the dominant baseline, then the first offset is zero and the glyph is aligned with the dominant baseline; otherwise, the glyph is aligned with the chosen alternate baseline.
baseline-identifiers below are used in this specification. Some of these are determined by baseline-tables contained in a font as described in XSL ([XSL], section 7.9.1). Others are computed from other font characteristics as described below.
This identifies the baseline used by most alphabetic and syllabic scripts. These include, but are not limited to, many Western, Southern Indic, Southeast Asian (non-ideographic) scripts.
This identifies the baseline used by ideographic scripts. For historical reasons, this baseline is at the bottom of the ideographic EM box and not in the center of the ideographic EM box. Дивіться the "central" baseline. ideographic scripts include Chinese, Japanese, Korean, and Vietnamese Chu Nom.
This identifies the baseline used by certain Indic scripts. These scripts include Devanagari, Gurmukhi and Bengali.
This identifies the baseline used by mathematical symbols.
This identifies a computed baseline that is at the center of the EM box. This baseline lies halfway between the text-before-edge and text-after-edge baselines.
NOTE:For ideographic fonts, this baseline is often used to align the glyphs; it is an alternative to the ideographic baseline.
This identifies a baseline that is offset from the alphabetic baseline in the shift-direction by 1/2 the значення the x-height font characteristic. position of this baseline may be obtained from the font data or, for fonts that have a font characteristic for "x-height", it may be computed using 1/2 the "x-height". Lacking either of these pieces of information, the position of this baseline may be approximated by the "central" baseline.
This identifies the before-edge of the EM box. position of this baseline may be specified in the baseline-table or it may be calculated.
NOTE:position of this baseline is normally around or at the top of the ascenders, but it may not encompass all accents that can appear above a glyph. For these fonts the значення the "ascent" font characteristic is used. For ideographic fonts, the position of this baseline is normally 1 EM in the shift-direction from the "ideographic" baseline. Однак, some ideographic fonts have a reduced width in the inline-progression-direction to allow tighter setting. When such a font, designed only for vertical writing-modes, is used in a horizontal writing-mode, the "text-before-edge" baseline may be less than 1 EM from the text-after-edge.
This identifies the after-edge of the EM box. position of this baseline may be specified in the baseline-table or it may be calculated.
NOTE:For fonts with descenders, the position of this baseline is normally around or at the bottom of the descenders. For these fonts the значення the "descent" font characteristic is used. For ideographic fonts, the position of this baseline is normally at the "ideographic" baseline.
There are, in addition, two computed baselines that are only defined for line areas. Since SVG does not support the notion of computations based on line areas, the two computed baselines are mapped as follows:
There are also four baselines that are defined only for horizontal writing-modes.
This baseline is the same as the "before-edge" baseline in a horizontal writing-mode and is undefined in a vertical writing mode.
This baseline is the same as the "text-before-edge" baseline in a horizontal writing-mode and is undefined in a vertical writing mode.
This baseline is the same as the "after-edge" baseline in a horizontal writing-mode and is undefined in a vertical writing mode.
This baseline is the same as the "text-after-edge" baseline in a horizontal writing-mode and is undefined in a vertical writing mode.
baseline-alignment properties follow.
| Value: | auto | use-script | no-change | reset-size | ideographic | alphabetic | hanging | mathematical | central | middle | text-after-edge | text-before-edge | inherit |
| Initial: | auto |
| Applies to: | text content elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
"dominant-baseline" property is used to determine or re-determine a scaled-baseline-table. A scaled-baseline-table is a compound value with three components: a baseline-identifier for the dominant-baseline, a baseline-table and a baseline-table font-size. Some values of the property re-determine all three values; other only re-establish the baseline-table font-size. When the initial value, auto, would give an undesired result, this property can бути використано to explicitly set the desire scaled-baseline-table.
Values for the property have the following meaning:
Якщо this property occurs on a ‘text’ element, then the computed value depends on the значення the ‘writing-mode’ property. Якщо the 'writing-mode' is horizontal, then the значення the dominant-baseline component is 'alphabetic', else if the 'writing-mode' is vertical, then the значення the dominant-baseline component is 'central'.
Якщо this property occurs on a ‘tspan’, ‘tref’, ‘altGlyph’ or ‘textPath’ element, then the dominant-baseline and the baseline-table components remain the same as those of the parent text content element. Якщо the computed ‘baseline-shift’ value actually shifts the baseline, then the baseline-table font-size component is set to the значення the ‘font-size’ property on the element on which the ‘dominant-baseline’ property occurs, otherwise the baseline-table font-size remains the same as that елементу. Якщо there is no parent text content element, the scaled-baseline-table value is constructed as above for ‘text’ elements.
Якщо there is no baseline table in the nominal font or if the baseline table lacks an entry for the desired baseline, then the користувацький агент may use heuristics to determine the position of the desired baseline.
| Value: | auto | baseline | before-edge | text-before-edge | middle | central | after-edge | text-after-edge | ideographic | alphabetic | hanging | mathematical | inherit |
| Initial: | auto |
| Applies to: | ‘tspan’, ‘tref’, ‘altGlyph’, ‘textPath’ elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
This property specifies how an об’єкт aligned with respect to its parent. This property specifies which baseline of this element is to be aligned with the corresponding baseline of the parent. For example, this allows alphabetic baselines in Roman text to stay aligned across font size changes. It defaults to the baseline with the same name as the computed значення the alignment-baseline property. That is, the position of "ideographic" alignment-point in the block-progression-direction is the position of the "ideographic" baseline in the baseline-table of the object being aligned.
Values have the following meanings:
| Value: | baseline | sub | super | <percentage> | <length> | inherit |
| Initial: | baseline |
| Applies to: | ‘tspan’, ‘tref’, ‘altGlyph’, ‘textPath’ elements |
| Inherited: | no |
| Percentages: | refers to the "line-height" of the ‘text’ element, which in the case of SVG is defined to be equal to the ‘font-size’ |
| Media: | visual |
| Анімується: | yes |
‘baseline-shift’ property allows repositioning of the dominant-baseline relative to the dominant-baseline of the parent text content element. shifted object might be a sub- or superscript. Within the shifted object, the whole baseline-table is offset; not just a single baseline. amount of the shift is determined from information from the parent text content element, the sub- or superscript offset from the nominal font of the parent text content element, percent of the "line-height" of the parent text content element or an absolute value.
In SVG, the ‘baseline-shift’ property represents a supplemental adjustment to the baseline tables. ‘baseline-shift’ property shifts the baseline tables for each glyph to temporary new positions, for example to lift the glyph into superscript or subscript position, but it does not effect the current text position. When the current text position is adjusted after rendering a glyph to take into account glyph advance values, the adjustment happens as if there were no baseline shift.
‘baseline-shift’ properties can nest. Each nested ‘baseline-shift’ is added to previous baseline shift values.
Values for the property have the following meaning:
SVG uses the following font specification properties. Except for any additional information provided in this specification, the normative definition of these properties is in CSS2 ([CSS2], chapter section 15.2). Any SVG-specific notes about these properties are contained in the descriptions below.
Note also the rules for expressing the syntax of CSS property values ([CSS2], section 1.3.2).
| Value: | [[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family>] | inherit |
| Initial: | depends on користувацький агент |
| Applies to: | text content elements |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
This property indicates which font family is to бути використано to render the text, specified as a prioritized list of font family names and/or generic family names. Unless the family name corresponds to a CSS IDENT, it must be quoted. Except for any additional information provided in this specification, the normative definition of the property is in CSS2 ([CSS2], section 15.2.2).
| Value: | normal | italic | oblique | inherit |
| Initial: | normal |
| Applies to: | text content elements |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
This property specifies whether the text is to be rendered using a normal, italic or oblique face. Except for any additional information provided in this specification, the normative definition of the property is in CSS2 ([CSS2], section 15.2.3).
| Value: | normal | small-caps | inherit |
| Initial: | normal |
| Applies to: | text content elements |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
This property indicates whether the text is to be rendered using the normal glyphs for lowercase characters or using small-caps glyphs for lowercase characters. Except for any additional information provided in this specification, the normative definition of the property is in CSS2 ([CSS2], section 15.2.3).
| Value: | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit |
| Initial: | normal |
| Applies to: | text content elements |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
This property refers to the boldness or lightness of the glyphs used to render the text, relative to other fonts in the same font family. Except for any additional information provided in this specification, the normative definition of the property is in CSS2 ([CSS2], section 15.2.3).
| Value: | normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit |
| Initial: | normal |
| Applies to: | text content elements |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
This property indicates the desired amount of condensing or expansion in the glyphs used to render the text. Except for any additional information provided in this specification, the normative definition of the property is in CSS2 ([CSS2], section 15.2.3).
| Value: | <absolute-size> | <relative-size> | <length> | <percentage> | inherit |
| Initial: | medium |
| Applies to: | text content elements |
| Inherited: | yes, the computed value is inherited |
| Percentages: | refer to parent element's font size |
| Media: | visual |
| Анімується: | yes |
This property refers to the size of the font from baseline to baseline when multiple lines of text are set solid in a multiline layout environment. For SVG, if a <length> is provided without a unit identifier (тобто, an unqualified number such as 128), the SVG користувацький агент processes the <length> as a height value in the current user coordinate system.
Якщо a <length> is provided with one of the unit identifiers (тобто, 12pt or 10%), then the SVG користувацький агент converts the <length> into a corresponding value in the current user coordinate system by applying the rules described in Units.
Except for any additional information provided in this specification, the normative definition of the property is in CSS2 ([CSS2], section 15.2.4).
| Value: | <number> | none | inherit |
| Initial: | none |
| Applies to: | text content elements |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes (non-additive) |
This property allows authors to specify an aspect value for an element that will preserve the x-height of the first choice font in a substitute font. Except for any additional information provided in this specification, the normative definition of the property is in CSS2 ([CSS2], section 15.2.4).
| Value: | [ [ <'font-style'>
|| <'font-variant'>
|| <'font-weight'>
]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit |
| Initial: | see individual properties |
| Applies to: | text content elements |
| Inherited: | yes |
| Percentages: | allowed on 'font-size' and 'line-height' (Note: for the purposes of processing the ‘font’ property in SVG, 'line-height' is assumed to be equal the value for property ‘font-size’) |
| Media: | visual |
| Анімується: | yes (non-additive) |
Shorthand property for setting ‘font-style’, ‘font-variant’, ‘font-weight’, ‘font-size’, ‘line-height’ and ‘font-family’. ‘line-height’ property has no effect on text layout in SVG. For the purposes of the ‘font’ property, ‘line-height’ is assumed to be equal to the значення the ‘font-size’ property. Conforming SVG Viewers are not required to support the various system font options (caption, icon, menu, message-box, small-caption and status-bar) and can use a system font or one of the generic fonts instead.
Except for any additional information provided in this specification, the normative definition of the property is in CSS2 ([CSS2], section 15.2.5).
Three properties affect the space between characters and words:
| Value: | auto | <length> | inherit |
| Initial: | auto |
| Applies to: | text content elements |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
значення auto indicates that the користувацький агент should adjust inter-glyph spacing based on kerning tables that are included in the font that will бути використано (тобто, enable auto-kerning).
Якщо a <length> is provided, then auto-kerning is disabled. Instead, inter-character spacing is set to the given <length>. most common scenario, other than auto, is to set ‘kerning’ to a значення 0 so that auto-kerning is disabled.
Якщо a <length> is provided without a unit identifier (тобто, an unqualified number such as 128), the SVG користувацький агент processes the <length> as a width value in the current user coordinate system.
Якщо a <length> is provided with one of the unit identifiers (тобто, .25em or 1%), then the SVG користувацький агент converts the <length> into a corresponding value in the current user coordinate system by applying the rules described in Units.
When a <length> is provided, its value is added to the inter-character spacing value specified by the ‘letter-spacing’ property.
| Value: | normal | <length> | inherit |
| Initial: | normal |
| Applies to: | text content elements |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
This property specifies spacing behavior between text characters supplemental to any spacing due to the ‘kerning’ property.
For SVG, if a <length> is provided without a unit identifier (тобто, an unqualified number such as 128), the SVG користувацький агент processes the <length> as a width value in the current user coordinate system.
Якщо a <length> is provided with one of the unit identifiers (тобто, .25em or 1%), then the SVG користувацький агент converts the <length> into a corresponding value in the current user coordinate system by applying the rules described in Units.
Except for any additional information provided in this specification, the normative definition of the property is in CSS2 ([CSS2], section 16.4).
| Value: | normal | <length> | inherit |
| Initial: | normal |
| Applies to: | text content elements |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
This property specifies spacing behavior between words. For SVG, if a <length> is provided without a unit identifier (тобто, an unqualified number such as 128), the SVG користувацький агент processes the <length> as a width value in the current user coordinate system.
Якщо a <length> is provided with one of the unit identifiers (тобто, .25em or 1%), then the SVG користувацький агент converts the <length> into a corresponding value in the current user coordinate system by applying the rules described in Units.
Except for any additional information provided in this specification, the normative definition of the property is in CSS2 ([CSS2], section 16.4).
| Value: | none | [ underline || overline || line-through || blink ] | inherit |
| Initial: | none |
| Applies to: | text content elements |
| Inherited: | no (дивіться prose) |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
This property описує decorations that are added to the text of an element. Conforming SVG Viewers are not required to support the blink value.
Except for any additional information provided in this specification, the normative definition of the property is in CSS2 ([CSS2], section 16.3.1).
CSS2 specification defines the behavior of the ‘text-decoration’ property using the terminology "block-level elements" and "inline elements". For the purposes of the ‘text-decoration’ property and SVG, a ‘text’ element represents a block-level element and any of the potential children of a ‘text’ element (тобто, a ‘tspan’) represent inline elements.
Also, the CSS2 definition of ‘text-decoration’ specifies that the "color of the decorations" remain the same on descendant elements. Since SVG offers a painting model consisting of the ability to apply various types of paint (дивіться Painting: Filling, Stroking and Marker Symbols) to both the interior (тобто, the "fill") and the outline (тобто, the "stroke") of text, for SVG the ‘text-decoration’ property is defined such that, for an element which has a specified value for the ‘text-decoration’ property, all decorations on its content and that of its descendants are rendered using the same fill and stroke properties as are present on the given element. Якщо the ‘text-decoration’ property is specified on a descendant, then that overrides the ancestor.
Because SVG allows text to be both filled and stroked, drawing order matters in some circumstances with text decorations. Text decoration drawing order should be as follows:
Приклад textdecoration01 provides examples for ‘text-decoration’. first line of text has no value for ‘text-decoration’, so the initial значення text-decoration:none is used. second line shows text-decoration:line-through. third line shows text-decoration:underline. fourth line illustrates the rule whereby decorations are rendered using the same fill and stroke properties as are present on the element for which the ‘text-decoration’ is specified. Since ‘text-decoration’ is specified on the ‘text’ element, all text within the ‘text’ element has its underline rendered with the same fill and stroke properties as exist on the ‘text’ element (тобто, blue fill, red stroke), even though the various words have different fill and stroke property values. Однак, the word "different" explicitly specifies a value for ‘text-decoration’; таким чином, its underline is rendered using the fill and stroke properties as the ‘tspan’ element that surrounds the word "different" (тобто, yellow fill, darkgreen stroke):
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Приклад textdecoration01 - behavior of 'text-decoration' property</desc>
<rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2" />
<g font-size="60" fill="blue" stroke="red" stroke-width="1" >
<text x="100" y="75">Normal text</text>
<text x="100" y="165" text-decoration="line-through" >Text with line-through</text>
<text x="100" y="255" text-decoration="underline" >Underlined text</text>
<text x="100" y="345" text-decoration="underline" >
<tspan>One </tspan>
<tspan fill="yellow" stroke="purple" >word </tspan>
<tspan fill="yellow" stroke="black" >has </tspan>
<tspan fill="yellow" stroke="darkgreen" text-decoration="underline" >different </tspan>
<tspan fill="yellow" stroke="blue" >underlining</tspan>
</text>
</g>
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
In addition to text drawn in a straight line, SVG also includes the ability to place text along the shape of a ‘path’ element. To specify that a block of text is to be rendered along the shape of a ‘path’, include the given text within a ‘textPath’ element which includes an ‘xlink:href’ attribute with an IRI reference to a ‘path’ element.
Визначення атрибутів:
path data coordinates within the referenced ‘path’ element are assumed to be in the same coordinate system as the current ‘text’ element, not in the coordinate system where the ‘path’ element is defined. ‘transform’ attribute on the referenced ‘path’ element represents a supplemental transformation relative to the current user coordinate system для поточного ‘text’ element, including any adjustments to the current user coordinate system due to a possible ‘transform’ attribute on the current ‘text’ element. For example, the following fragment of SVG content:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<g transform="translate(25,25)">
<defs>
<path id="path1" transform="scale(2)" d="..." fill="none" stroke="red"/>
</defs>
</g>
<text transform="rotate(45)">
<textPath xlink:href="#path1">Text along path1</textPath>
</text>
</svg>
should have the same effect as the following:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<g transform="rotate(45)">
<defs>
<path id="path1" transform="scale(2)" d="..." fill="none" stroke="red"/>
</defs>
<text>
<textPath xlink:href="#path1">Text along path1</textPath>
</text>
</g>
</svg>
Note that the transform="translate(25,25)"
has no effect on the ‘textPath’
element, whereas the transform="rotate(45)"
applies to both the ‘text’
and the use of the ‘path’
element as the referenced shape for text on a path.
Приклад toap01 provides a simple example of text on a path:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="3.6cm" viewBox="0 0 1000 300" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="MyPath"
d="M 100 200
C 200 100 300 0 400 100
C 500 200 600 300 700 200
C 800 100 900 100 900 100" />
</defs>
<desc>Приклад toap01 - simple text on a path</desc>
<use xlink:href="#MyPath" fill="none" stroke="red" />
<text font-family="Verdana" font-size="42.5" fill="blue" >
<textPath xlink:href="#MyPath">
We go up, then we go down, then up again
</textPath>
</text>
<!-- Show outline of canvas using 'rect' element -->
<rect x="1" y="1" width="998" height="298"
fill="none" stroke="blue" stroke-width="2" />
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
Приклад toap02 shows how ‘tspan’ elements can be included within ‘textPath’ elements to adjust styling attributes and adjust the current text position before rendering a particular glyph. first occurrence of the word "up" is filled with the color red. Attribute ‘dy’ is used to lift the word "up" from the baseline.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="3.6cm" viewBox="0 0 1000 300" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="MyPath"
d="M 100 200
C 200 100 300 0 400 100
C 500 200 600 300 700 200
C 800 100 900 100 900 100" />
</defs>
<desc>Приклад toap02 - tspan within textPath</desc>
<use xlink:href="#MyPath" fill="none" stroke="red" />
<text font-family="Verdana" font-size="42.5" fill="blue" >
<textPath xlink:href="#MyPath">
We go
<tspan dy="-30" fill="red" >
up
</tspan>
<tspan dy="30">
,
</tspan>
then we go down, then up again
</textPath>
</text>
<!-- Show outline of canvas using 'rect' element -->
<rect x="1" y="1" width="998" height="298"
fill="none" stroke="blue" stroke-width="2" />
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
Приклад toap03 demonstrates the use of the ‘startOffset’ attribute on the ‘textPath’ element to specify the start position of the text string as a particular position along the path. Notice that glyphs that fall off the end of the path are not rendered (дивіться text on a path layout rules).
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="3.6cm" viewBox="0 0 1000 300" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="MyPath"
d="M 100 200
C 200 100 300 0 400 100
C 500 200 600 300 700 200
C 800 100 900 100 900 100" />
</defs>
<desc>Приклад toap03 - text on a path with startOffset attribute</desc>
<use xlink:href="#MyPath" fill="none" stroke="red" />
<text font-family="Verdana" font-size="42.5" fill="blue" >
<textPath xlink:href="#MyPath" startOffset="80%">
We go up, then we go down, then up again
</textPath>
</text>
<!-- Show outline of canvas using 'rect' element -->
<rect x="1" y="1" width="998" height="298"
fill="none" stroke="blue" stroke-width="2" />
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
Conceptually, for text on a path the target path is stretched out into either a horizontal or vertical straight line segment. For horizontal text layout flows, the path is stretched out into a hypothetical horizontal line segment such that the start of the path is mapped to the left of the line segment. For vertical text layout flows, the path is stretched out into a hypothetical vertical line segment such that the start of the path is mapped to the top of the line segment. standard text layout rules are applied to the hypothetical straight line segment and the result is mapped back onto the target path. Vertical and bidirectional text layout rules also apply to text on a path.
reference orientation is determined individually for each glyph that is rendered along the path. For horizontal text layout flows, the reference orientation for a given glyph is the vector that starts at the intersection point on the path to which the glyph is attached and which points in the direction 90 degrees counter-clockwise from the angle of the curve at the intersection point. For vertical text layout flows, the reference orientation for a given glyph is the vector that starts at the intersection point on the path to which the glyph is attached and which points in the direction 180 degrees from the angle of the curve at the intersection point.
Приклад toap04 will бути використано to illustrate the particular layout rules for text on a path that supplement the basic text layout rules for straight line horizontal or vertical text.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="3.6cm" viewBox="0 0 1000 300" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="MyPath"
d="M 100 125
C 150 125 250 175 300 175
C 350 175 450 125 500 125
C 550 125 650 175 700 175
C 750 175 850 125 900 125" />
</defs>
<desc>Приклад toap04 - text on a path layout rules</desc>
<use xlink:href="#MyPath" fill="none" stroke="red" />
<text font-family="Verdana" font-size="60" fill="blue" letter-spacing="2" >
<textPath xlink:href="#MyPath">
Choose shame or get war
</textPath>
</text>
<!-- Show outline of canvas using 'rect' element -->
<rect x="1" y="1" width="998" height="298"
fill="none" stroke="blue" stroke-width="2" />
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
following picture does an initial zoom in on the first glyph in the ‘text’ element.
small dot above shows the point at which the glyph is attached to the path. box around the glyph shows the glyph is rotated such that its horizontal axis is parallel to the tangent of the curve at the point at which the glyph is attached to the path. box also shows the glyph's charwidth (тобто, the amount which the current text position advances horizontally when the glyph is drawn using horizontal text layout).
next picture zooms in further to demonstrate the detailed layout rules.
For left-to-right horizontal text layout along a path (тобто, when the glyph orientation is perpendicular to the inline-progression-direction), the layout rules are as follows:
Comparable rules are used for top-to-bottom vertical text layout along a path (тобто, when the glyph orientation is parallel with the inline-progression-direction), the layout rules are as follows:
In the calculations above, if either the startpoint-on-the-path or the endpoint-on-the-path is off the end of the path, then extend the path beyond its end points with a straight line that is parallel to the tangent at the path at its end point so that the midpoint-on-the-path can still be calculated.
When the inline-progression-direction is horizontal, then any ‘x’ attributes on ‘text’, ‘tspan’, ‘tref’ or ‘altGlyph’ elements represent new absolute offsets along the path, thus providing explicit new values for startpoint-on-the-path. Any ‘y’ attributes on ‘text’, ‘tspan’, ‘tref’ or ‘altGlyph’ elements are ignored. When the inline-progression-direction is vertical, then any ‘y’ attributes on ‘text’, ‘tspan’, ‘tref’ or ‘altGlyph’ elements represent new absolute offsets along the path, thus providing explicit new values for startpoint-on-the-path. Any ‘x’ attributes on ‘text’, ‘tspan’, ‘tref’ or ‘altGlyph’ elements are ignored.
There are situations such as ligatures, special-purpose fonts (тобто, a font for music symbols) or alternate glyphs for Asian text strings where it is required that a different set of glyphs is used than the glyph(s) which normally corresponds to the given character data.
‘altGlyph’ element provides control over the glyphs used to render particular character data.
Визначення атрибутів:
Якщо the references to alternate glyphs do not result in successful identification of alternate glyphs to use, then the character(s) that are inside of the ‘altGlyph’ element are rendered as if the ‘altGlyph’ element were a ‘tspan’ element instead.
An ‘altGlyph’ element either references a ‘glyph’ element or an ‘altGlyphDef’ element via its ‘xlink:href’ attribute or identifies a glyph by means of font selection properties, a glyph identifier and a font format. Якщо the ‘xlink:href’ attribute is specified, it takes precedence, and the other glyph identification attributes and properties are ignored.
‘altGlyphDef’ element defines a set of possible glyph substitutions.
An ‘altGlyphDef’ can contain either of the following:
‘altGlyphItem’ element defines a candidate set of possible glyph substitutions. first ‘altGlyphItem’ element whose referenced glyphs are all available is chosen. Its glyphs are rendered instead of the character(s) that are inside of the referencing ‘altGlyph’ element.
‘glyphRef’ element defines a possible glyph to use.
Визначення атрибутів:
A ‘glyphRef’ either references a ‘glyph’ element in an фрагменту документу SVG via its ‘xlink:href’ attribute or identifies a glyph by means of font selection properties, a glyph identifier and a font format. Якщо insufficient attributes and properties have been specified to identify a glyph, then the ‘glyphRef’ is processed in the same manner as when a glyph reference is fully specified, but the given glyph is not available. Якщо the ‘xlink:href’ attribute is specified, it takes precedence, and the other glyph identification attributes and properties are ignored.
SVG supports the standard XML attribute ‘xml:space’ to specify the handling of white space characters within a given ‘text’ element's character data. Note that any child element of a ‘text’ element may also have an ‘xml:space’ attribute which will apply to that child element's text content. SVG користувацький агент has special processing rules associated with this attribute as described below. These are behaviors that occur subsequent to XML parsing [XML10] and any construction of a DOM.
‘xml:space’ is an inheritable attribute which can have one of two values:
"a b" (three spaces between "a" and "b")
will produce a larger separation between "a" and "b" than "a b"
(one space between "a" and "b").following example illustrates that line indentation can be important when using xml:space="default". fragment below show two pairs of similar ‘text’ elements, with both ‘text’ elements using xml:space="default". For these examples, there is no extra white space at the end of any of the lines (тобто, the line break occurs immediately after the last visible character).
[01] <text xml:space='default'> [02] WS example [03] indented lines [04] </text> [05] <text xml:space='preserve'>WS example indented lines</text> [06] [07] <text xml:space='default'> [08]WS example [09]non-indented lines [10] </text> [11] <text xml:space='preserve'>WS examplenon-indented lines</text>
first pair of ‘text’ elements above showефект of indented character data. attribute xml:space="default" in the first ‘text’ element instructs the користувацький агент to:
second pair of ‘text’ elements above showефект of non-indented character data. attribute xml:space="default" in the third ‘text’ element instructs the користувацький агент to:
Note that XML parsers are required to convert the standard representations for a newline indicator (тобто, the literal two-character sequence "#xD#xA" or the stand-alone literals #xD or #xA) into the single character #xA before passing character data to the application. Thus, each newline in SVG will be represented by the single character #xA, no matter what representation for newlines might have been used in the original resource. ( Дивіться XML end-of-line handling.)
Any features in the SVG language or the SVG DOM that are based on character position number, such as the ‘x’, ‘y’, ‘dx’, ‘dy’ and ‘rotate’ attributes on the ‘text’, ‘tspan’, ‘tref’ and ‘altGlyph’ elements, are based on character position after applying the white space handling rules described here. In particular, if xml:space="default", it is often the case that white space characters are removed as part of processing. Character position numbers index into the text string after the white space characters have been removed per the rules in this section.
Note that a glyph corresponding to a whitespace character should only be displayed as a visible but blank space, even if the glyph itself happens to be non-blank. Дивіться display of unsupported characters [UNICODE].
‘xml:space’ attribute is:
Анімується: ні.
Conforming SVG viewers on systems which have the capacity for text selection (тобто, systems which are equipped with a pointer device such as a mouse) and which have system clipboards for copy/paste operations are required to support:
A text selection operation starts when all of the following occur:
As the text selection operation proceeds (тобто, the user continues to press the given mouse button), all associated events with other графічний елементи are ignored (тобто, the text selection operation is modal) and the SVG користувацький агент shall dynamically indicate which characters are selected by an appropriate highlighting technique, such as redrawing the selected glyphs with inverse colors. As the pointer is moved during the text selection process, the end glyph for the text selection operation is the glyph within the same ‘text’ element whose glyph cell is closest to the pointer. All characters within the ‘text’ element whose position within the ‘text’ element is between the start of selection and end of selection shall be highlighted, regardless of position on the canvas and regardless of any графічний елементи that might be above the end of selection point.
Once the text selection operation ends (тобто, the user releases the given mouse button), the selected text will stay highlighted until an event occurs which cancels text selection, such as a pointer device activation event (тобто, pressing a mouse button).
Detailed rules for determining which characters to highlight during a text selection operation are provided in Text selection implementation notes.
For systems which have system clipboards, the SVG користувацький агент is required to provide a user interface for initiating a copy of the currently selected text to the system clipboard. It is sufficient for the SVG користувацький агент to post the selected text string in the system's appropriate clipboard format for plain text, but it is preferable if the SVG користувацький агент also posts a rich text alternative which captures the various font properties associated with the given text string.
For bidirectional text, the користувацький агент must support text selection in logical order, which will result in discontinuous highlighting of glyphs due to the bidirectional reordering of characters. користувацькі агенти can provide an alternative ability to select bidirectional text in visual rendering order (тобто, after bidirectional text layout algorithms have been applied), with the result that selected character data might be discontinuous logically. In this case, if the user requests that bidirectional text be copied to the clipboard, then the користувацький агент is required to make appropriate adjustments to copy only the visually selected characters to the clipboard.
When feasible, it is recommended that generators of SVG attempt to order their text strings to facilitate properly ordered text selection within SVG viewing applications such as Web browsers.
SVGTextContentElement is inherited by various text-related interfaces, such as SVGTextElement, SVGTSpanElement, SVGTRefElement, SVGAltGlyphElement and SVGTextPathElement.
For the methods on this interface that refer to an index to a character or a number of characters, these references are to be interpreted as an index to a UTF-16 code unit or a number of UTF-16 code units, respectively. This is for consistency with DOM Level 2 Core, where methods on the CharacterData interface use UTF-16 code units as indexes and counts within the character data. Thus for example, if the text content of a ‘text’ element is a single non-BMP character, such as U+10000, then invoking getNumberOfChars on that element will return 2 since there are two UTF-16 code units (the surrogate pair) used to represent that one character.
Інтерфейс SVGTextContentElement : SVGElement, SVGTests, SVGLangSpace, SVGExternalResourcesRequired, SVGStylable { // lengthAdjust Types const unsigned short LENGTHADJUST_UNKNOWN = 0; const unsigned short LENGTHADJUST_SPACING = 1; const unsigned short LENGTHADJUST_SPACINGANDGLYPHS = 2; readonly attribute SVGAnimatedLength textLength; readonly attribute SVGAnimatedEnumeration lengthAdjust; long getNumberOfChars(); float getComputedTextLength(); float getSubStringLength(in unsigned long charnum, in unsigned long nchars) raises(DOMException); SVGPoint getStartPositionOfChar(in unsigned long charnum) raises(DOMException); SVGPoint getEndPositionOfChar(in unsigned long charnum) raises(DOMException); SVGRect getExtentOfChar(in unsigned long charnum) raises(DOMException); float getRotationOfChar(in unsigned long charnum) raises(DOMException); long getCharNumAtPosition(in SVGPoint point); void selectSubString(in unsigned long charnum, in unsigned long nchars) raises(DOMException); };
Інтерфейс SVGTextPositioningElement : SVGTextContentElement { readonly attribute SVGAnimatedLengthList x; readonly attribute SVGAnimatedLengthList y; readonly attribute SVGAnimatedLengthList dx; readonly attribute SVGAnimatedLengthList dy; readonly attribute SVGAnimatedNumberList rotate; };
Інтерфейс SVGTextElement : SVGTextPositioningElement, SVGTransformable { };
Інтерфейс SVGTSpanElement : SVGTextPositioningElement { };
Інтерфейс SVGTRefElement : SVGTextPositioningElement, SVGURIReference { };
Інтерфейс SVGTextPathElement : SVGTextContentElement, SVGURIReference { // textPath Method Types const unsigned short TEXTPATH_METHODTYPE_UNKNOWN = 0; const unsigned short TEXTPATH_METHODTYPE_ALIGN = 1; const unsigned short TEXTPATH_METHODTYPE_STRETCH = 2; // textPath Spacing Types const unsigned short TEXTPATH_SPACINGTYPE_UNKNOWN = 0; const unsigned short TEXTPATH_SPACINGTYPE_AUTO = 1; const unsigned short TEXTPATH_SPACINGTYPE_EXACT = 2; readonly attribute SVGAnimatedLength startOffset; readonly attribute SVGAnimatedEnumeration method; readonly attribute SVGAnimatedEnumeration spacing; };
Інтерфейс SVGAltGlyphElement : SVGTextPositioningElement, SVGURIReference { attribute DOMString glyphRef setraises(DOMException); attribute DOMString format setraises(DOMException); };
Інтерфейс SVGAltGlyphDefElement : SVGElement { };
Інтерфейс SVGAltGlyphItemElement : SVGElement { };
Інтерфейс SVGGlyphRefElement : SVGElement, SVGURIReference, SVGStylable { attribute DOMString glyphRef setraises(DOMException); attribute DOMString format setraises(DOMException); attribute float x setraises(DOMException); attribute float y setraises(DOMException); attribute float dx setraises(DOMException); attribute float dy setraises(DOMException); };
‘path’ elements, ‘text’ elements and basic shapes can be filled (which means painting the interior of the object) and stroked (which means painting along the outline of the object). Filling and stroking both can be thought of in more general terms as painting operations.
Certain elements (тобто, ‘path’, ‘polyline’, ‘polygon’ and ‘line’ elements) can also have marker symbols drawn at their vertices.
With SVG, you can paint (тобто, fill or stroke) with:
SVG uses the general notion of a paint server. Paint servers are specified using a IRI reference on a ‘fill’ or ‘stroke’ property. Gradients and patterns are just specific types of paint servers.
Properties ‘fill’ and ‘stroke’ take on a значення type <paint>, which is specified as follows:
| <paint>: | none | currentColor | <color> [<icccolor>] | <funciri> [ none | currentColor | <color> [<icccolor>] ] | inherit |
| Value: | <paint> ( Дивіться Specifying paint) |
| Initial: | black |
| Applies to: | shapes and text content elements |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
‘fill’ property paints the interior of the given graphical element. area to be painted consists of any areas inside the outline of the shape. To determine the inside of the shape, all subpaths are considered, and the interior is determined according to the rules associated with the current значення the ‘fill-rule’ property. zero-width geometric outline of a shape is included in the area to be painted.
fill operation fills open subpaths by performing the fill operation as if an additional "closepath" command were added to the path to connect the last point of the subpath with the first point of the subpath. Thus, fill operations apply to both open subpaths within ‘path’ elements (тобто, subpaths without a closepath command) and ‘polyline’ elements.
| Value: | nonzero | evenodd | inherit |
| Initial: | nonzero |
| Applies to: | shapes and text content elements |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
‘fill-rule’ property indicates the algorithm which is to бути використано to determine what parts of the canvas are included inside the shape. For a simple, non-intersecting path, it is intuitively clear what region lies "inside"; however, for a more complex path, such as a path that intersects itself or where one subpath encloses another, the interpretation of "inside" is not so obvious.
‘fill-rule’ property provides two options for how the inside of a shape is determined:

Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)

Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
(Note: the above explanations do not specify what to do if a path segment coincides with or is tangent to the ray. Since any ray will do, one may simply choose a different ray that does not have such problem intersections.)
| Value: | <opacity-value> | inherit |
| Initial: | 1 |
| Applies to: | shapes and text content elements |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
‘fill-opacity’ specifies the opacity of the painting operation used to paint the interior the current object. ( Дивіться Painting shapes and text.)
Related properties: ‘stroke-opacity’ and ‘opacity’.
following are the properties which affect how an element is stroked.
In all cases, all stroking properties which are affected by directionality, such as those having to do with dash patterns, must be rendered such that the stroke operation starts at the same point at which the графічний елемент starts. In particular, for ‘path’ elements, the start of the path is the first point of the initial "moveto" command.
For stroking properties such as dash patterns whose computations are dependent on progress along the outline of the графічний елемент, distance calculations are required to utilize the SVG користувацький агент's standard Distance along a path algorithms.
When stroking is performed using a complex paint server, such as a gradient or a pattern, the stroke operation must be identical to the result that would have occurred if the geometric shape defined by the geometry of the current графічний елемент and its associated stroking properties were converted to an equivalent ‘path’ element and then filled using the given paint server.
| Value: | <paint> ( Дивіться Specifying paint) |
| Initial: | none |
| Applies to: | shapes and text content elements |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
‘stroke’ property paints along the outline of the given graphical element.
A subpath (дивіться Paths) consisting of a single moveto shall not be stroked. Any zero length subpath shall not be stroked if the ‘stroke-linecap’ property has a значення butt but shall be stroked if the ‘stroke-linecap’ property has a значення round or square, producing respectively a circle or a square centered at the given point. Прикладs of zero length subpaths include 'M 10,10 L 10,10', 'M 20,20 h 0', 'M 30,30 z' and 'M 40,40 c 0,0 0,0 0,0'.
| Value: | <percentage> | <length> | inherit |
| Initial: | 1 |
| Applies to: | shapes and text content elements |
| Inherited: | yes |
| Percentages: | Yes |
| Media: | visual |
| Анімується: | yes |
This property specifies the width of the stroke on the current object. Якщо a <percentage> is used, the value represents a percentage of the current viewport. ( Дивіться Units.)
A zero value causes no stroke to be painted. Від’ємне значення є помилкою (дивіться Обробка помилок).
| Value: | butt | round | square | inherit |
| Initial: | butt |
| Applies to: | shapes and text content elements |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
‘stroke-linecap’ specifies the shape to бути використано at the end of open subpaths when they are stroked. For further details see the path implementation notes.

View this example as SVG (SVG- and CSS-enabled browsers only)
| Value: | miter | round | bevel | inherit |
| Initial: | miter |
| Applies to: | shapes and text content elements |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
‘stroke-linejoin’ specifies the shape to бути використано at the corners of paths or basic shapes when they are stroked. For further details see the path implementation notes.

View this example as SVG (SVG- and CSS-enabled browsers only)
| Value: | <miterlimit> | inherit |
| Initial: | 4 |
| Applies to: | shapes and text content elements |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
When two line segments meet at a sharp angle and miter joins have been specified for ‘stroke-linejoin’, it is possible for the miter to extend far beyond the thickness of the line stroking the path. ‘stroke-miterlimit’ imposes a limit on the ratio of the miter length to the ‘stroke-width’. When the limit is exceeded, the join is converted from a miter to a bevel.
ratio of miter length (distance between the outer tip and the inner corner of the miter) to ‘stroke-width’ is directly related to the angle (theta) between the segments in user space by the formula:
miterLength / stroke-width = 1 / sin ( theta / 2 )
For example, a miter limit of 1.414 converts miters to bevels for theta less than 90 degrees, a limit of 4.0 converts them for theta less than approximately 29 degrees, and a limit of 10.0 converts them for theta less than approximately 11.5 degrees.
| Value: | none | <dasharray> | inherit |
| Initial: | none |
| Applies to: | shapes and text content elements |
| Inherited: | yes |
| Percentages: | yes (дивіться below) |
| Media: | visual |
| Анімується: | yes (non-additive) |
‘stroke-dasharray’ controls the pattern of dashes and gaps used to stroke paths. <dasharray> contains a list of comma and/or white space separated <length>s and <percentage>s that specify the lengths of alternating dashes and gaps. Якщо an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, stroke-dasharray: 5,3,2 is equivalent to stroke-dasharray: 5,3,2,5,3,2.
A list of comma and/or white space separated <length>s (which can have a unit identifier) and <percentage>s. A percentage represents a distance as a percentage of the current viewport (дивіться Units). Від’ємне значення є помилкою (дивіться Обробка помилок). Якщо the sum of the values is zero, then the stroke is rendered as if a значення none were specified. For further details see the path implementation notes.
grammar for <dasharray> is as follows:
dasharray ::= (length | percentage) (comma-wsp dasharray)?
| Value: | <percentage> | <length> | inherit |
| Initial: | 0 |
| Applies to: | shapes and text content elements |
| Inherited: | yes |
| Percentages: | see prose |
| Media: | visual |
| Анімується: | yes |
‘stroke-dashoffset’ specifies the distance into the dash pattern to start the dash.
Якщо a <percentage> is used, the value represents a percentage of the current viewport (дивіться Units).
Values can be negative.
| Value: | <opacity-value> | inherit |
| Initial: | 1 |
| Applies to: | shapes and text content elements |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
‘stroke-opacity’ specifies the opacity of the painting operation used to stroke the current object. ( Дивіться Painting shapes and text.)
Related properties: ‘fill-opacity’ and ‘opacity’.
SVG uses two properties, ‘display’ and ‘visibility’, to control the visibility of graphical elements or (in the case of the ‘display’ property) контейнерний елементи.
differences between the two properties are as follows:
| Value: | inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit |
| Initial: | inline |
| Applies to: | ‘svg’, ‘g’, ‘switch’, ‘a’, ‘foreignObject’, графічний елементи (including the ‘text’ element) and text sub-elements (тобто, ‘tspan’, ‘tref’, ‘altGlyph’, ‘textPath’) |
| Inherited: | no |
| Percentages: | N/A |
| Media: | all |
| Анімується: | yes |
A значення display: none indicates that the given element and its children shall not be rendered directly (тобто, those elements are not present in the rendering tree). Any value other than none or inherit indicates that the given element shall be rendered by the SVG користувацький агент.
‘display’ property only affects the direct rendering of a given element, whereas it does not prevent elements from being referenced by other elements. For example, setting display: none on a ‘path’ element will prevent that element from getting rendered directly onto the canvas, but the ‘path’ element can still be referenced by a ‘textPath’ element; furthermore, its geometry will бути використано in text-on-a-path processing even if the ‘path’ has display: none.
‘display’ property affects direct rendering into offscreen canvases also, such as occurs with the implementation model for masks. Thus, setting display: none on a child of a ‘mask’ will prevent the given child element from being rendered as part of the mask. Similarly, setting display: none on a child of a ‘clipPath’ element will prevent the given child element from contributing to the clipping path.
Elements with display: none do not take up space in text layout operations, do not receive events, and do not contribute to bounding box and clipping paths calculations.
Except for any additional information provided in this specification, the normative definition of the ‘display’ property is the CSS2 definition ([CSS2], section 9.2.6).
| Value: | visible | hidden | collapse | inherit |
| Initial: | visible |
| Applies to: | графічний елементи (including the ‘text’ element) and text sub-elements (тобто, ‘tspan’, ‘tref’, ‘altGlyph’, ‘textPath’ and ‘a’) |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
Note that if the ‘visibility’ property is set to hidden on a ‘tspan’, ‘tref’ or ‘altGlyph’ element, then the text is invisible but still takes up space in text layout calculations.
Depending on the значення property ‘pointer-events’, графічний елементи which have their ‘visibility’ property set to hidden still might receive events.
Except for any additional information provided in this specification, the normative definition of the ‘visibility’ property is the CSS2 definition ([CSS2], section 11.2).
A marker is a symbol which is attached to one or more vertices of ‘path’, ‘line’, ‘polyline’ and ‘polygon’ elements. Typically, markers are used to make arrowheads or polymarkers. Arrowheads can be defined by attaching a marker to the start or end vertices of ‘path’, ‘line’ or ‘polyline’ elements. Polymarkers can be defined by attaching a marker to all vertices of a ‘path’, ‘line’, ‘polyline’ or ‘polygon’ element.
graphics for a marker are defined by a ‘marker’ element. To indicate that a particular ‘marker’ element should be rendered at the vertices of a particular ‘path’, ‘line’, ‘polyline’ or ‘polygon’ element, set one or more marker properties (‘marker’, ‘marker-start’, ‘marker-mid’ or ‘marker-end’) to reference the given ‘marker’ element.
Приклад Marker draws a triangular marker symbol as an arrowhead at the end of a path.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="4in" height="2in"
viewBox="0 0 4000 2000" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="Triangle"
viewBox="0 0 10 10" refX="0" refY="5"
markerUnits="strokeWidth"
markerWidth="4" markerHeight="3"
orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
</defs>
<rect x="10" y="10" width="3980" height="1980"
fill="none" stroke="blue" stroke-width="10" />
<desc>Placing an arrowhead at the end of a path.
</desc>
<path d="M 1000 750 L 2000 750 L 2500 1250"
fill="none" stroke="black" stroke-width="100"
marker-end="url(#Triangle)" />
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
Markers can be animated. animated effects will show on all current uses of the markers within the document.
‘marker’ element defines the graphics that is to бути використано for drawing arrowheads or polymarkers on a given ‘path’, ‘line’, ‘polyline’ or ‘polygon’ element.
Визначення атрибутів:
Markers are drawn such that their reference point (тобто, attributes ‘refX’ and ‘refY’) is positioned at the given vertex. In other words, a translation transformation is constructed by the користувацький агент to achieveефект of having point (‘refX’ and ‘refY’) within the marker content's coordinate system (after any transformations due to the ‘viewBox’ and ‘preserveAspectRatio’ attributes) align exactly with the given vertex.
SVG's користувацький агент style sheet sets the ‘overflow’ property for ‘marker’ elements to hidden, which causes a rectangular clipping path to be created at the bounds of the marker tile. Unless the ‘overflow’ property is overridden, any graphics within the marker which goes outside of the marker rectangle will be clipped.
contents of the ‘marker’ are relative to a new coordinate system. Attribute ‘markerUnits’ determines an initial scale factor for transforming the graphics in the marker into the user coordinate system for the referencing element. An additional set of transformations might occur if there is a ‘viewBox’ attribute, in which case the coordinate system for the contents of the ‘marker’ will be transformed due to the processing of attributes ‘viewBox’ and ‘preserveAspectRatio’. Якщо there is no ‘viewBox’ attribute, then the assumed default value for the the ‘viewBox’ attribute has the origin of the viewBox coincident with the origin of the viewport and the width/height of the viewBox the same as the width/height of the viewport.
Properties inherit into the ‘marker’ element from its ancestors; properties do not inherit from the element referencing the ‘marker’ element.
‘marker’ elements are never rendered directly; their only usage is as something that can be referenced using the ‘marker’, ‘marker-start’, ‘marker-end’ and ‘marker-mid’ properties. ‘display’ property does not apply to the ‘marker’ element; таким чином, ‘marker’ elements are not directly rendered even if the ‘display’ property is set to a value other than none, and ‘marker’ elements are available for referencing even when the ‘display’ property on the ‘marker’ element or any of its ancestors is set to none.
Event attributes and event listeners attached to the contents of a ‘marker’ element are not processed; only the rendering aspects of ‘marker’ elements are processed.
‘marker-start’ defines the arrowhead or polymarker that shall be drawn at the first vertex of the given ‘path’ element or basic shape. ‘marker-end’ defines the arrowhead or polymarker that shall be drawn at the final vertex. ‘marker-mid’ defines the arrowhead or polymarker that shall be drawn at every other vertex (тобто, every vertex except the first and last). Note that for a ‘path’ element which ends with a closed sub-path, the last vertex is the same as the initial vertex on the given sub-path. In this case, if ‘marker-end’ does not equal none, then it is possible that two markers will be rendered on the given vertex. One way to prevent this is to set ‘marker-end’ to none. (Note that the same comment applies to ‘polygon’ elements.)
| Value: | none | <funciri> | inherit |
| Initial: | none |
| Applies to: | ‘path’, ‘line’, ‘polyline’ and ‘polygon’ elements |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
‘marker’ property specifies the marker symbol that shall бути використано for all points on the sets the value for all vertices on the given ‘path’ element or basic shape. It is a short-hand for the three individual marker properties:
| Value: | see individual properties |
| Initial: | see individual properties |
| Applies to: | ‘path’, ‘line’, ‘polyline’ and ‘polygon’ elements |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
Markers are drawn after the given об’єкт filled and stroked.
For each marker that is drawn, a temporary new user coordinate system is established so that the marker will be positioned and sized correctly, as follows:
rendering effect of a marker is as if the contents of the referenced ‘marker’ element were deeply cloned into a separate non-exposed DOM tree for each instance of the marker. Because the cloned DOM tree is non-exposed, the SVG DOM does not show the cloned instance of the marker.
For користувацькі агенти that support Styling with CSS, the conceptual deep cloning of the referenced ‘marker’ element into a non-exposed DOM tree also copies any property values resulting from the CSS cascade ([CSS2], chapter 6) and property inheritance on the referenced element and its contents. CSS2 selectors can be applied to the original (тобто, referenced) elements because they are part of the formal document structure. CSS2 selectors cannot be applied to the (conceptually) cloned DOM tree because its contents are not part of the formal document structure.
For illustrative purposes, we'll repeat the marker example shown earlier:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="4in" height="2in"
viewBox="0 0 4000 2000" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="Triangle"
viewBox="0 0 10 10" refX="0" refY="5"
markerUnits="strokeWidth"
markerWidth="4" markerHeight="3"
orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
</defs>
<rect x="10" y="10" width="3980" height="1980"
fill="none" stroke="blue" stroke-width="10" />
<desc>Placing an arrowhead at the end of a path.
</desc>
<path d="M 1000 750 L 2000 750 L 2500 1250"
fill="none" stroke="black" stroke-width="100"
marker-end="url(#Triangle)" />
</svg>
rendering effect of the above file will be visually identical to the following:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="4in" height="2in"
viewBox="0 0 4000 2000" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<desc>File which produces the same effect
as the marker example file, but without
using markers.
</desc>
<rect x="10" y="10" width="3980" height="1980"
fill="none" stroke="blue" stroke-width="10" />
<!-- path draws as before, but without the marker properties -->
<path d="M 1000 750 L 2000 750 L 2500 1250"
fill="none" stroke="black" stroke-width="100" />
<!-- following logic simulates drawing a marker
at final vertex of the path. -->
<!-- First off, move the origin of the user coordinate system
so that the origin is now aligned with the end point of the path. -->
<g transform="translate(2500,1250)" >
<!-- Rotate the coordinate system 45 degrees because
the marker specified orient="auto" and the final segment
of the path is going in the direction of 45 degrees. -->
<g transform="rotate(45)" >
<!-- Scale the coordinate system to match the coordinate system
indicated by the 'markerUnits' attributes, which in this case has
a значення 'strokeWidth'. Therefore, scale the coordinate system
by the current значення the 'stroke-width' property, which is 100. -->
<g transform="scale(100)" >
<!-- Translate the coordinate system by
(-refX*viewBoxToMarkerUnitsScaleX, -refY*viewBoxToMarkerUnitsScaleY)
in order that (refX,refY) within the marker will align with the vertex.
In this case, we use the default value for preserveAspectRatio
('xMidYMid meet'), which means find a uniform scale factor
(тобто, viewBoxToMarkerUnitsScaleX=viewBoxToMarkerUnitsScaleY)
such that the viewBox fits entirely within the viewport ('meet') and
is center-aligned ('xMidYMid'). In this case, the uniform scale factor
is markerHeight/viewBoxHeight=3/10=.3. Therefore, translate by
(-refX*.3,-refY*.3)=(0*.3,-5*.3)=(0,-1.5). -->
<g transform="translate(0,-1.5)" >
<!-- There is an implicit clipping path because the користувацький агент style
sheet says that the 'overflow' property for markers has the value
'hidden'. To achieve this, create a clipping path at the bounds
of the viewport. Note that in this case the viewport extends
0.5 units to the left and right of the viewBox due to
a uniform scale factor, different ratios for markerWidth/viewBoxWidth
and markerHeight/viewBoxHeight, and 'xMidYMid' alignment -->
<clipPath id="cp1" >
<rect x="-0.5" y="0" width="4" height="3" />
</clipPath>
<g clip-path="url(#cp1)" >
<!-- Scale the coordinate system by the uniform scale factor
markerHeight/viewBoxHeight=3/10=.3 to set the coordinate
system to viewBox units. -->
<g transform="scale(.3)" >
<!-- This 'g' element carries all property values that result from
cascading and inheritance of properties on the original 'marker' element.
In this example, neither fill nor stroke was specified on the 'marker'
element or any ancestors of the 'marker', so the initial values of
"black" and "none" are used, respectively. -->
<g fill="black" stroke="none" >
<!-- Expand out the contents of the 'marker' element. -->
<path d="M 0 0 L 10 5 L 0 10 z" />
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
SVG користувацький агент performs color interpolations and compositing at various points as it processes SVG content. Two properties, ‘color-interpolation’ and ‘color-interpolation-filters’, control which color space is used for particular categories of graphics operations. following table shows which property applies to which graphics Операції:
| Graphics operation | Corresponding property |
|---|---|
| interpolating between gradient stops (дивіться Gradient) | ‘color-interpolation’ |
| interpolating color when performing color animations with either ‘animate’ or ‘animateColor’ | ‘color-interpolation’ |
| alpha compositing of графічний елементи into the current background | ‘color-interpolation’ |
| filter effects | ‘color-interpolation-filters’ |
Both properties choose between color operations occurring in the sRGB color space or in a (light energy linear) linearized RGB color space. Having chosen the appropriate color space, component-wise linear interpolation is used.
conversion formulas between the sRGB color space (тобто, nonlinear with 2.2 gamma curve) and the linearized RGB color space (тобто, color values expressed as sRGB tristimulus values without a gamma curve) can be found in the sRGB specification [SRGB]. For illustrative purposes, the following formula shows the conversion from sRGB to linearized RGB:
R[sRGB] = R[sRGB-8bit] / 255 G[sRGB] = G[sRGB-8bit] / 255 B[sRGB] = B[sRGB-8bit] / 255 Якщо R[sRGB], G[sRGB], B[sRGB] <= 0.04045 R[linearRGB] = R[sRGB] / 12.92 G[linearRGB] = G[sRGB] / 12.92 B[linearRGB] = B[sRGB] / 12.92 else if R[sRGB], G[sRGB], B[sRGB] > 0.04045 R[linearRGB] = ((R[sRGB] + 0.055) / 1.055) ^ 2.4 G[linearRGB] = ((G[sRGB] + 0.055) / 1.055) ^ 2.4 B[linearRGB] = ((B[sRGB] + 0.055) / 1.055) ^ 2.4 R[linearRGB-8bit] = R[linearRGB] * 255 G[linearRGB-8bit] = G[linearRGB] * 255 B[linearRGB-8bit] = B[linearRGB] * 255
Out-of-range color values, if supported by the користувацький агент, also are converted using the above formulas. ( Дивіться Clamping values which are restricted to a particular range.)
| Value: | auto | sRGB | linearRGB | inherit |
| Initial: | sRGB |
| Applies to: | контейнерний елементи, графічний елементи, ‘animate’ and ‘animateColor’ |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
‘color-interpolation’ property specifies the color space for gradient interpolations, color animations and alpha compositing.
When a child element is blended into a background, the значення the ‘color-interpolation’ property on the child determines the type of blending, not the значення the ‘color-interpolation’ on the parent. For gradients which make use of the ‘xlink:href’ attribute to reference another gradient, the gradient uses the ‘color-interpolation’ property value from the gradient element which is directly referenced by the ‘fill’ or ‘stroke’ property. When animating colors, color interpolation is performed according to the значення the ‘color-interpolation’ property on the element being animated.
| Value: | auto | sRGB | linearRGB | inherit |
| Initial: | linearRGB |
| Applies to: | filter primitives |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
‘color-interpolation-filters’ property specifies the color space for imaging operations performed via filter effects.
Note that ‘color-interpolation-filters’ has a different initial value than ‘color-interpolation’. ‘color-interpolation-filters’ has an initial значення linearRGB, whereas ‘color-interpolation’ has an initial значення sRGB. Thus, in the default case, filter effects operations occur in the linearRGB color space, whereas all other color interpolations occur by default in the sRGB color space.
creator of SVG content might want to provide a hint to the implementation about how to make speed vs. quality tradeoffs as it performs color interpolation and compositing. ‘color-rendering’ property provides a hint to the SVG користувацький агент about how to optimize its color interpolation and compositing operations.
‘color-rendering’ takes precedence over ‘color-interpolation-filters’. For example, assume color-rendering: optimizeSpeed and color-interpolation-filters: linearRGB. In this case, the SVG користувацький агент should perform color operations in a way that optimizes performance, which might mean sacrificing the color interpolation precision as specified by color-interpolation-filters: linearRGB.
| Value: | auto | optimizeSpeed | optimizeQuality | inherit |
| Initial: | auto |
| Applies to: | контейнерний елементи, графічний елементи, ‘animate’ and ‘animateColor’ |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
creator of SVG content might want to provide a hint to the implementation about what tradeoffs to make as it renders vector графічний елементи such as ‘path’ elements and basic shapes such as circles and rectangles. ‘shape-rendering’ property provides these hints.
| Value: | auto | optimizeSpeed | crispEdges | geometricPrecision | inherit |
| Initial: | auto |
| Applies to: | shapes |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
creator of SVG content might want to provide a hint to the implementation about what tradeoffs to make as it renders text. ‘text-rendering’ property provides these hints.
| Value: | auto | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit |
| Initial: | auto |
| Applies to: | ‘text’ elements |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
creator of SVG content might want to provide a hint to the implementation about how to make speed vs. quality tradeoffs as it performs image processing. ‘image-rendering’ property provides a hint to the SVG користувацький агент about how to optimize its image rendering.
| Value: | auto | optimizeSpeed | optimizeQuality | inherit |
| Initial: | auto |
| Applies to: | images |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
In all cases, resampling must be done in a truecolor (тобто, 24-bit) color space even if the original data and/or the target device is indexed color.
values of any of the painting properties described in this chapter can be inherited from a given object's parent. Painting, however, is always done on each графічний елемент individually, never at the контейнерний елемент (тобто, a ‘g’) level. Thus, for the following SVG, even though the gradient fill is specified on the ‘g’, the gradient is simply inherited through the ‘g’ element down into each rectangle, each of which is rendered such that its interior is painted with the gradient.
Приклад Inheritance
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="7cm" height="2cm" viewBox="0 0 700 200"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Gradients apply to leaf nodes
</desc>
<g>
<defs>
<linearGradient id="MyGradient" gradientUnits="objectBoundingBox">
<stop offset="0%" stop-color="#F60" />
<stop offset="100%" stop-color="#FF6" />
</linearGradient>
</defs>
<rect x="1" y="1" width="698" height="198"
fill="none" stroke="blue" stroke-width="2" />
<g fill="url(#MyGradient)" >
<rect x="100" y="50" width="200" height="100"/>
<rect x="400" y="50" width="200" height="100"/>
</g>
</g>
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
Any painting properties defined in terms of the object's bounding box use the bounding box of the графічний елемент to which the operation applies. Note that text elements are defined such that any painting operations defined in terms of the object's bounding box use the bounding box of the entire ‘text’ element. ( Дивіться the discussion of object bounding box units and text elements.)
SVGPaint interface corresponds to basic type <paint> and represents the values of properties ‘fill’ and ‘stroke’.
Note: SVGPaint interface is deprecated, and may be dropped from future versions of the SVG specification.
Інтерфейс SVGPaint : SVGColor { // Paint Types const unsigned short SVG_PAINTTYPE_UNKNOWN = 0; const unsigned short SVG_PAINTTYPE_RGBCOLOR = 1; const unsigned short SVG_PAINTTYPE_RGBCOLOR_ICCCOLOR = 2; const unsigned short SVG_PAINTTYPE_NONE = 101; const unsigned short SVG_PAINTTYPE_CURRENTCOLOR = 102; const unsigned short SVG_PAINTTYPE_URI_NONE = 103; const unsigned short SVG_PAINTTYPE_URI_CURRENTCOLOR = 104; const unsigned short SVG_PAINTTYPE_URI_RGBCOLOR = 105; const unsigned short SVG_PAINTTYPE_URI_RGBCOLOR_ICCCOLOR = 106; const unsigned short SVG_PAINTTYPE_URI = 107; readonly attribute unsigned short paintType; readonly attribute DOMString uri; void setUri(in DOMString uri); void setPaint(in unsigned short paintType, in DOMString uri, in DOMString rgbColor, in DOMString iccColor) raises(SVGException); };
Інтерфейс SVGMarkerElement : SVGElement, SVGLangSpace, SVGExternalResourcesRequired, SVGStylable, SVGFitToViewBox { // Marker Unit Types const unsigned short SVG_MARKERUNITS_UNKNOWN = 0; const unsigned short SVG_MARKERUNITS_USERSPACEONUSE = 1; const unsigned short SVG_MARKERUNITS_STROKEWIDTH = 2; // Marker Orientation Types const unsigned short SVG_MARKER_ORIENT_UNKNOWN = 0; const unsigned short SVG_MARKER_ORIENT_AUTO = 1; const unsigned short SVG_MARKER_ORIENT_ANGLE = 2; readonly attribute SVGAnimatedLength refX; readonly attribute SVGAnimatedLength refY; readonly attribute SVGAnimatedEnumeration markerUnits; readonly attribute SVGAnimatedLength markerWidth; readonly attribute SVGAnimatedLength markerHeight; readonly attribute SVGAnimatedEnumeration orientType; readonly attribute SVGAnimatedAngle orientAngle; void setOrientToAuto() raises(DOMException); void setOrientToAngle(in SVGAngle angle) raises(DOMException); };
All SVG colors are specified in the sRGB color space [SRGB]. At a minimum, SVG користувацькі агенти shall conform to the color behavior requirements specified in the color units section and the minimal gamma correction rules defined in the CSS2 specification.
Additionally, SVG content can specify an alternate color specification using an ICC profile [ICC42] as described in Specifying paint. Якщо ICC-based colors are provided and the SVG користувацький агент supports ICC color, then the ICC-based color takes precedence over the sRGB color specification; otherwise, the RGB fallback colors must бути використано. Note that, in this specification, color interpolation occurs in an RGB color space even if an ICC-based color specification is provided (дивіться ‘color-interpolation’).
‘color’ property is used to provide a potential indirect value (currentColor) for the ‘fill’, ‘stroke’, ‘stop-color’, ‘flood-color’ and ‘lighting-color’ properties.
| Value: | <color> | inherit |
| Initial: | depends on користувацький агент |
| Applies to: | elements to which properties ‘fill’, ‘stroke’, ‘stop-color’, ‘flood-color’ and ‘lighting-color’ apply |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
Except for any additional information provided in this specification, the normative definition of the property is in CSS2 ([CSS2], section 14.1).
International Color Consortium has established a standard, the ICC Profile [ICC42], for documenting the color characteristics of input and output devices. Using these profiles, it is possible to build a transform and correct visual data for viewing on different devices.
A color profile description provides the bridge between an ICC profile and references to that ICC profile within SVG content. color profile description is added to the користувацький агент's list of known color profiles and then used to select the relevant profile. color profile description contains descriptors for the location of the color profile on the Web, a name to reference the profile and information about rendering intent.
Color profile descriptions can be specified in either of the following ways:
Якщо a color profile with the same name value has been identified by both a ‘color-profile’ element and @color-profile rules within a CSS style sheet, then the користувацький агент shall first attempt to locate the profile by using the specifications in the @color-profile rules first.
Визначення атрибутів:
‘rendering-intent’ permits the specification of a color profile rendering intent other than the default. ‘rendering-intent’ is applicable primarily to color profiles corresponding to CMYK color spaces. different options cause different methods to бути використано for translating colors to the color gamut of the target rendering device:
When the document is styled using CSS, the @color-profile rule can бути використано to specify a color profile description. general form is:
@color-profile { <color-profile-description> }
where the <color-profile-description> has the form:
descriptor: value; [...] descriptor: value;
Each @color-profile rule specifies a value for every color profile descriptor, either implicitly or explicitly. Those not given explicit values in the rule take the initial value listed with each descriptor in this specification. These descriptors apply solely within the context of the @color-profile rule in which they are defined, and do not apply to document language elements. Thus, there is no notion of which elements the descriptors apply to, or whether the values are inherited by child elements.
following are the descriptors for a <color-profile-description>:
"local(" + <string> + ")"
where <string> is the profile's unique ID as specified by International
Color Consortium. (Note: Profile description fields do not
represent a profile's unique ID. With current ICC proposals, the
profile's unique ID is an MD5-encoded value within the profile
header.) | Values: | <name> |
| Initial: | undefined |
| Media: | visual |
| Values: | auto | perceptual | relative-colorimetric | saturation | absolute-colorimetric |
| Initial: | auto |
| Media: | visual |
| Анімується: | no |
Дивіться the description for the ‘rendering-intent’ attribute on the ‘color-profile’ element.
| Value: | auto | sRGB | <name> | <iri> | inherit |
| Initial: | auto |
| Applies to: | ‘image’ elements that refer to raster images |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
Інтерфейс SVGColorProfileElement : SVGElement, SVGURIReference, SVGRenderingIntent { attribute DOMString local; attribute DOMString name; attribute unsigned short renderingIntent; };
SVGColorProfileRule interface represents an @color-profile rule in a CSS style sheet. An @color-profile rule identifies a ICC profile which can be referenced within a given document.
Support for the SVGColorProfileRule interface is only required in користувацькі агенти that support styling with CSS.
Інтерфейс SVGColorProfileRule : SVGCSSRule, SVGRenderingIntent { attribute DOMString src setraises(DOMException); attribute DOMString name setraises(DOMException); attribute unsigned short renderingIntent setraises(DOMException); };
With SVG, you can fill (тобто, paint the interior) or stroke (тобто, paint the outline) of shapes and text using one of the following:
SVG uses the general notion of a paint server. Gradients and patterns are just specific types of built-in paint servers.
Paint servers are referenced using an IRI reference on a ‘fill’ or ‘stroke’ property.
Gradients consist of continuously smooth color transitions along a vector from one color to another, possibly followed by additional transitions along the same vector to other colors. SVG provides for two types of gradients: linear gradients and radial gradients.
Once defined, gradients are then referenced using ‘fill’ or ‘stroke’ properties on a given графічний елемент to indicate that the given element shall be filled or stroked with the referenced gradient.
angle of the color transitions along the gradient vector is defined by the gradient normal. Before any transforms are applied to the gradient or its referencing графічний елемент, the gradient normal is perpendicular with the gradient vector. Якщо a графічний елемент references a gradient, conceptually the графічний елемент should take a copy of the gradient vector and gradient normal and treat it as part of its own geometry. Any transformations applied to the графічний елемент geometry also apply to the copied gradient vector and gradient normal. Any gradient transforms that are specified on the reference gradient are applied before any графічний елемент transformations are applied to the gradient.
Linear gradients are defined by a ‘linearGradient’ element.
Визначення атрибутів:
Percentages are allowed for ‘x1’, ‘y1’, ‘x2’ and ‘y2’. For gradientUnits="userSpaceOnUse", percentages represent values relative to the current viewport. For gradientUnits="objectBoundingBox", percentages represent values relative to the bounding box for the object.
Якщо ‘x1’ = ‘x2’ and ‘y1’ = ‘y2’, then the area to be painted will be painted as a single color using the color and opacity of the last gradient stop.
Properties inherit into the ‘linearGradient’ element from its ancestors; properties do not inherit from the element referencing the ‘linearGradient’ element.
‘linearGradient’ elements are never rendered directly; their only usage is as something that can be referenced using the ‘fill’ and ‘stroke’ properties. ‘display’ property does not apply to the ‘linearGradient’ element; таким чином, ‘linearGradient’ elements are not directly rendered even if the ‘display’ property is set to a value other than none, and ‘linearGradient’ elements are available for referencing even when the ‘display’ property on the ‘linearGradient’ element or any of its ancestors is set to none.
Приклад lingrad01 shows how to fill a rectangle by referencing a linear gradient paint server.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="8cm" height="4cm" viewBox="0 0 800 400" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<desc>Приклад lingrad01 - fill a rectangle using a
linear gradient paint server</desc>
<g>
<defs>
<linearGradient id="MyGradient">
<stop offset="5%" stop-color="#F60" />
<stop offset="95%" stop-color="#FF6" />
</linearGradient>
</defs>
<!-- Outline the drawing area in blue -->
<rect fill="none" stroke="blue"
x="1" y="1" width="798" height="398"/>
<!-- rectangle is filled using a linear gradient paint server -->
<rect fill="url(#MyGradient)" stroke="black" stroke-width="5"
x="100" y="100" width="600" height="200"/>
</g>
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
Radial gradients are defined by a ‘radialGradient’ element.
Визначення атрибутів:
Percentages are allowed for attributes ‘cx’, ‘cy’, ‘r’, ‘fx’ and ‘fy’. For gradientUnits="userSpaceOnUse", percentages represent values relative to the current viewport. For gradientUnits="objectBoundingBox", percentages represent values relative to the bounding box for the object.
Якщо the point defined by ‘fx’ and ‘fy’ lies outside the circle defined by ‘cx’, ‘cy’ and ‘r’, then the користувацький агент shall set the focal point to the intersection of the line from (‘cx’, ‘cy’) to (‘fx’, ‘fy’) with the circle defined by ‘cx’, ‘cy’ and ‘r’.
Properties inherit into the ‘radialGradient’ element from its ancestors; properties do not inherit from the element referencing the ‘radialGradient’ element.
‘radialGradient’ elements are never rendered directly; their only usage is as something that can be referenced using the ‘fill’ and ‘stroke’ properties. ‘display’ property does not apply to the ‘radialGradient’ element; таким чином, ‘radialGradient’ elements are not directly rendered even if the ‘display’ property is set to a value other than none, and ‘radialGradient’ elements are available for referencing even when the ‘display’ property on the ‘radialGradient’ element or any of its ancestors is set to none.
Приклад radgrad01 shows how to fill a rectangle by referencing a radial gradient paint server.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="8cm" height="4cm" viewBox="0 0 800 400" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<desc>Приклад radgrad01 - fill a rectangle by referencing a
radial gradient paint server</desc>
<g>
<defs>
<radialGradient id="MyGradient" gradientUnits="userSpaceOnUse"
cx="400" cy="200" r="300" fx="400" fy="200">
<stop offset="0%" stop-color="red" />
<stop offset="50%" stop-color="blue" />
<stop offset="100%" stop-color="red" />
</radialGradient>
</defs>
<!-- Outline the drawing area in blue -->
<rect fill="none" stroke="blue"
x="1" y="1" width="798" height="398"/>
<!-- rectangle is filled using a radial gradient paint server -->
<rect fill="url(#MyGradient)" stroke="black" stroke-width="5"
x="100" y="100" width="600" height="200"/>
</g>
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
ramp of colors to use on a gradient is defined by the ‘stop’ elements that are child elements to either the ‘linearGradient’ element or the ‘radialGradient’ element.
Визначення атрибутів:
‘stop-color’ property indicates what color to use at that gradient stop. keyword currentColor and ICC colors can be specified in the same manner as within a <paint> specification for the ‘fill’ and ‘stroke’ properties.
| Value: | currentColor | <color> <icccolor> | inherit |
| Initial: | black |
| Applies to: | ‘stop’ elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
‘stop-opacity’ property defines the opacity of a given gradient stop.
| Value: | <opacity-value> | inherit |
| Initial: | 1 |
| Applies to: | ‘stop’ elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
Some notes on gradients:
<stop offset="0" stop-color="white"/> <stop offset=".2" stop-color="red"/> <stop offset=".2" stop-color="blue"/> <stop offset="1" stop-color="black"/>will have approximately the same effect as:
<stop offset="0" stop-color="white"/> <stop offset=".1999999999" stop-color="red"/> <stop offset=".2" stop-color="blue"/> <stop offset="1" stop-color="black"/>which is a gradient that goes smoothly from white to red, then abruptly shifts from red to blue, and then goes smoothly from blue to black.
A pattern is used to fill or stroke an object using a pre-defined graphic object which can be replicated ("tiled") at fixed intervals in x and y to cover the areas to be painted. Patterns are defined using a ‘pattern’ element and then referenced by properties ‘fill’ and ‘stroke’ on a given графічний елемент to indicate that the given element shall be filled or stroked with the referenced pattern.
Attributes ‘x’, ‘y’, ‘width’, ‘height’ and ‘patternUnits’ define a reference rectangle somewhere on the infinite canvas. reference rectangle has its top/left at (x, y) and its bottom/right at (x + width, y + height). tiling theoretically extends a series of such rectangles to infinity in X and Y (positive and negative), with rectangles starting at (x + m*width, y + n* height) for each possible integer value for m and n.
Визначення атрибутів:
Дивіться ‘preserveAspectRatio’.
Якщо the attribute не вказано, тоді ефект такий, якщо б було вказано значення xMidYMid meet were specified.
Анімується: так.
SVG's користувацький агент style sheet sets the ‘overflow’ property for ‘pattern’ elements to hidden, which causes a rectangular clipping path to be created at the bounds of the pattern tile. Unless the ‘overflow’ property is overridden, any graphics within the pattern which goes outside of the pattern rectangle will be clipped. Note that if the ‘overflow’ property is set to visible the rendering behavior for the pattern is undefined. Приклад pattern01 below showsефект of clipping to the pattern tile.
contents of the ‘pattern’ are relative to a new coordinate system. Якщо there is a ‘viewBox’ attribute, then the new coordinate system is fitted into the region defined by the ‘x’, ‘y’, ‘width’, ‘height’ and ‘patternUnits’ attributes on the ‘pattern’ element using the standard rules for ‘viewBox’ and ‘preserveAspectRatio’. Якщо there is no ‘viewBox’ attribute, then the new coordinate system has its origin at (x, y), where x is established by the ‘x’ attribute on the ‘pattern’ element, and y is established by the ‘y’ attribute on the ‘pattern’ element. Thus, in the following example:
<pattern x="10" y="10" width="20" height="20"> <rect x="5" y="5" width="10" height="10"/> </pattern>
the rectangle has its top/left located 5 units to the right and 5 units down from the origin of the pattern tile.
‘viewBox’ attribute introduces a supplemental transformation which is applied on top of any transformations necessary to create a new pattern coordinate system due to attributes ‘x’, ‘y’, ‘width’, ‘height’ and ‘patternUnits’.
Properties inherit into the ‘pattern’ element from its ancestors; properties do not inherit from the element referencing the ‘pattern’ element.
‘pattern’ elements are never rendered directly; their only usage is as something that can be referenced using the ‘fill’ and ‘stroke’ properties. ‘display’ property does not apply to the ‘pattern’ element; таким чином, ‘pattern’ elements are not directly rendered even if the ‘display’ property is set to a value other than none, and ‘pattern’ elements are available for referencing even when the ‘display’ property on the ‘pattern’ element or any of its ancestors is set to none.
Event attributes and event listeners attached to the contents of a ‘pattern’ element are not processed; only the rendering aspects of ‘pattern’ elements are processed.
Приклад pattern01 shows how to fill a rectangle by referencing a pattern paint server. Note how the blue stroke of each triangle has been clipped at the top and the left. This is due to SVG's користувацький агент style sheet setting the ‘overflow’ property for ‘pattern’ elements to hidden, which causes the pattern to be clipped to the bounds of the pattern tile.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="8cm" height="4cm" viewBox="0 0 800 400" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="TrianglePattern" patternUnits="userSpaceOnUse"
x="0" y="0" width="100" height="100"
viewBox="0 0 10 10" >
<path d="M 0 0 L 7 0 L 3.5 7 z" fill="red" stroke="blue" />
</pattern>
</defs>
<!-- Outline the drawing area in blue -->
<rect fill="none" stroke="blue"
x="1" y="1" width="798" height="398"/>
<!-- ellipse is filled using a triangle pattern paint server
and stroked with black -->
<ellipse fill="url(#TrianglePattern)" stroke="black" stroke-width="5"
cx="400" cy="200" rx="350" ry="150" />
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
Інтерфейс SVGGradientElement : SVGElement, SVGURIReference, SVGExternalResourcesRequired, SVGStylable, SVGUnitTypes { // Spread Method Types const unsigned short SVG_SPREADMETHOD_UNKNOWN = 0; const unsigned short SVG_SPREADMETHOD_PAD = 1; const unsigned short SVG_SPREADMETHOD_REFLECT = 2; const unsigned short SVG_SPREADMETHOD_REPEAT = 3; readonly attribute SVGAnimatedEnumeration gradientUnits; readonly attribute SVGAnimatedTransformList gradientTransform; readonly attribute SVGAnimatedEnumeration spreadMethod; };
Інтерфейс SVGLinearGradientElement : SVGGradientElement { readonly attribute SVGAnimatedLength x1; readonly attribute SVGAnimatedLength y1; readonly attribute SVGAnimatedLength x2; readonly attribute SVGAnimatedLength y2; };
Інтерфейс SVGRadialGradientElement : SVGGradientElement { readonly attribute SVGAnimatedLength cx; readonly attribute SVGAnimatedLength cy; readonly attribute SVGAnimatedLength r; readonly attribute SVGAnimatedLength fx; readonly attribute SVGAnimatedLength fy; };
Інтерфейс SVGStopElement : SVGElement, SVGStylable { readonly attribute SVGAnimatedNumber offset; };
Інтерфейс SVGPatternElement : SVGElement, SVGURIReference, SVGTests, SVGLangSpace, SVGExternalResourcesRequired, SVGStylable, SVGFitToViewBox, SVGUnitTypes { readonly attribute SVGAnimatedEnumeration patternUnits; readonly attribute SVGAnimatedEnumeration patternContentUnits; readonly attribute SVGAnimatedTransformList patternTransform; readonly attribute SVGAnimatedLength x; readonly attribute SVGAnimatedLength y; readonly attribute SVGAnimatedLength width; readonly attribute SVGAnimatedLength height; };
SVG supports the following clipping/masking features:
One key distinction between a clipping path and a mask is that clipping paths are hard masks (тобто, the silhouette consists of either fully opaque pixels or fully transparent pixels, with the possible exception of anti-aliasing along the edge of the silhouette) whereas masks consist of an image where each pixel value indicates the degree of transparency vs. opacity. In a mask, each pixel value can range from fully transparent to fully opaque.
SVG supports only simple alpha blending compositing (дивіться Simple Alpha Compositing).
Графічний елементs are blended into the elements already rendered on the canvas using simple alpha compositing, in which the resulting color and opacity at any given pixel on the canvas is the result of the following formulas (all color values use premultiplied alpha):
Er, Eg, Eb - Element color value Ea - Element alpha value Cr, Cg, Cb - Canvas color value (before blending) Ca - Canvas alpha value (before blending) Cr', Cg', Cb' - Canvas color value (after blending) Ca' - Canvas alpha value (after blending) Ca' = 1 - (1 - Ea) * (1 - Ca) Cr' = (1 - Ea) * Cr + Er Cg' = (1 - Ea) * Cg + Eg Cb' = (1 - Ea) * Cb + Eb
following rendering properties, which provide information about the color space in which to perform the compositing operations, apply to compositing Операції:
clipping path restricts the region to which paint can be applied. Conceptually, any parts of the drawing that lie outside of the region bounded by the currently active clipping path are not drawn. A clipping path can be thought of as a mask wherein those pixels outside the clipping path are black with an alpha значення zero and those pixels inside the clipping path are white with an alpha значення one (with the possible exception of anti-aliasing along the edge of the silhouette).
When an ‘svg’ element is either the root element in the document or is embedded within a document whose layout is determined according to the layout rules of CSS or XSL, then the користувацький агент must establish an initial clipping path for the фрагменту документу SVG. ‘overflow’ and ‘clip’ properties along with additional SVG користувацький агент processing rules determine the initial clipping path which the користувацький агент establishes for the фрагменту документу SVG:
| Value: | visible | hidden | scroll | auto | inherit |
| Initial: | see prose |
| Applies to: | elements which establish a new viewport, ‘pattern’ elements and ‘marker’ elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
‘overflow’ property has the same parameter values and has the same meaning as defined in CSS2 ([CSS2], section 11.1.1); however, the following additional points apply:
As a result of the above, the default behavior of SVG користувацькі агенти is to establish a clipping path to the bounds of the initial viewport and to establish a new clipping path for each element which establishes a new viewport and each ‘pattern’ and ‘marker’ element.
For related information, see Clip to viewport vs. clip to ‘viewBox’.
| Value: | <shape> | auto | inherit |
| Initial: | auto |
| Applies to: | elements which establish a new viewport, ‘pattern’ elements and ‘marker’ elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
‘clip’ property has the same parameter values as defined in CSS2 ([CSS2], section 11.1.2). Unitless values, which indicate current user coordinates, are permitted on the coordinate values on the <shape>. значення auto defines a clipping path along the bounds of the viewport created by the given element.
It is important to note that initial values for the ‘overflow’ and ‘clip’ properties and the користувацький агент style sheet will result in an initial clipping path that is set to the bounds of the initial viewport. When attributes ‘viewBox’ and ‘preserveAspectRatio’ attributes are specified, it is sometime desirable that the clipping path be set to the bounds of the ‘viewBox’ instead of the viewport (or reference rectangle, in the case of ‘marker’ and ‘pattern’ elements), particularly when ‘preserveAspectRatio’ specifies uniform scaling and the aspect ratio of the ‘viewBox’ does not match the aspect ratio of the viewport.
To set the initial clipping path to the bounds of the ‘viewBox’, set the bounds of ‘clip’ property to the same rectangle as specified on the ‘viewBox’ attribute. (Note that the parameters do not match. ‘clip’ takes values <top>, <right>,<bottom> and <left>, whereas ‘viewBox’ takes values <min-x>, <min-y>, <width> and <height>.)
A clipping path is defined with a ‘clipPath’ element. A clipping path is used/referenced using the ‘clip-path’ property.
A ‘clipPath’ element can contain ‘path’ elements, ‘text’ elements, basic shapes (such as ‘circle’) or a ‘use’ element. Якщо a ‘use’ element is a child of a ‘clipPath’ element, it must directly reference ‘path’, ‘text’ or basic shape elements. Indirect references are an error (дивіться Обробка помилок).
raw geometry of each child element exclusive of rendering properties such as ‘fill’, ‘stroke’, ‘stroke-width’ within a ‘clipPath’ conceptually defines a 1-bit mask (with the possible exception of anti-aliasing along the edge of the geometry) which represents the silhouette of the graphics associated with that element. Anything outside the outline of the об’єкт masked out. Якщо a child element is made invisible by ‘display’ or ‘visibility’ it does not contribute to the clipping path. When the ‘clipPath’ element contains multiple child elements, the silhouettes of the child elements are logically OR'd together to create a single silhouette which is then used to restrict the region onto which paint can be applied. Thus, a point is inside the clipping path if it is inside any of the children of the ‘clipPath’.
For a given графічний елемент, the actual clipping path used will be the intersection of the clipping path specified by its ‘clip-path’ property (if any) with any clipping paths on its ancestors, as specified by the ‘clip-path’ property on the ancestor elements, or by the ‘overflow’ property on ancestor elements which establish a new viewport. Also, see the discussion of the initial clipping path.)
A couple of notes:
Визначення атрибутів:
Properties inherit into the ‘clipPath’ element from its ancestors; properties do not inherit from the element referencing the ‘clipPath’ element.
‘clipPath’ elements are never rendered directly; their only usage is as something that can be referenced using the ‘clip-path’ property. ‘display’ property does not apply to the ‘clipPath’ element; таким чином, ‘clipPath’ elements are not directly rendered even if the ‘display’ property is set to a value other than none, and ‘clipPath’ elements are available for referencing even when the ‘display’ property on the ‘clipPath’ element or any of its ancestors is set to none.
| Value: | <funciri> | none | inherit |
| Initial: | none |
| Applies to: | контейнерний елементи, графічний елементи and ‘clipPath’ |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
| Value: | nonzero | evenodd | inherit |
| Initial: | nonzero |
| Applies to: | графічний елементи within a ‘clipPath’ element |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
‘clip-rule’ property only applies to графічний елементи that are contained within a ‘clipPath’ element. following fragment of code will cause an evenodd clipping rule to be applied to the clipping path because ‘clip-rule’ is specified on the ‘path’ element that defines the clipping shape:
<g clip-rule="nonzero">
<clipPath id="MyClip">
<path d="..." clip-rule="evenodd" />
</clipPath>
<rect clip-path="url(#MyClip)" ... />
</g>
whereas the following fragment of code will not cause an evenodd clipping rule to be applied because the ‘clip-rule’ is specified on the referencing element, not on the object defining the clipping shape:
<g clip-rule="nonzero">
<clipPath id="MyClip">
<path d="..." />
</clipPath>
<rect clip-path="url(#MyClip)" clip-rule="evenodd" ... />
</g>
A clipping path is conceptually equivalent to a custom viewport for the referencing element. Thus, it affects the rendering of an element, but not the element's inherent geometry. bounding box of a clipped element (that is, an element which references a ‘clipPath’ element via a ‘clip-path’ property, or a child of the referencing element) must remain the same as if it were not clipped.
By default, pointer-events must not be dispatched on the clipped (non-visible) regions of a shape. For example, a circle with a radius of 10 which is clipped to a circle with a radius of 5 will not receive 'click' events outside the smaller radius. Later versions of SVG may define new properties to enable fine-grained control over the interactions between hit testing and clipping.
In SVG, you can specify that any other graphics object or ‘g’ element can бути використано as an alpha mask for compositing the current object into the background.
A mask is defined with a ‘mask’ element. A mask is used/referenced using the ‘mask’ property.
A ‘mask’ can contain any graphical elements or контейнерний елементи such as a ‘g’.
It is an error if the ‘mask’ property references a non-existent object or if the referenced об’єкт not a ‘mask’ element (дивіться Error Processing).
effect is as if the child elements of the ‘mask’ are rendered into an offscreen image which has been ініціалізований в transparent black. Any graphical object which uses/references the given ‘mask’ element will be painted onto the background through the mask, thus completely or partially masking out parts of the graphical object.
For any graphics object that is used as a mask, the mask value at any point is computed from the color channel values and alpha channel value as follows. First a luminance value is computed from the color channel values:
Finally if the graphics object also includes an alpha channel, then the computed luminance value is multiplied by the corresponding alpha value to produce the mask value.
For a four-channel RGBA graphics object that is used as a mask, both the color channels and the alpha channel of the mask contribute to the masking operation. alpha mask that is used to composite the current object into the background represents the product of the luminance of the color channels (дивіться previous paragraph) and the alpha channel from the mask.
For a three-channel RGB graphics object that is used as a mask (тобто, when referencing a 3-channel image file),ефект is as if the object were converted into a 4-channel RGBA image with the alpha channel uniformly set to 1.
For a single-channel image that is used as a mask (тобто, when referencing a 1-channel grayscale image file),ефект is as if the object were converted into a 4-channel RGBA image, where the single channel from the referenced об’єкт used to compute the three color channels and the alpha channel is uniformly set to 1. Note that when referencing a grayscale image file, the transfer curve relating the encoded grayscale values to linear light values must be taken into account when computing the color channels.
effect of a mask is identical to what would have happened if there were no mask but instead the alpha channel of the given object were multiplied with the mask's resulting alpha values (тобто, the product of the mask's luminance from its color channels multiplied by the mask's alpha channel).
Note that SVG ‘path’s, shapes (тобто, ‘circle’) and ‘text’ are all treated as four-channel RGBA images for the purposes of masking operations.
Приклад mask01 uses an image to mask a rectangle.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="8cm" height="3cm" viewBox="0 0 800 300" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Приклад mask01 - blue text masked with gradient against red background
</desc>
<defs>
<linearGradient id="Gradient" gradientUnits="userSpaceOnUse"
x1="0" y1="0" x2="800" y2="0">
<stop offset="0" stop-color="white" stop-opacity="0" />
<stop offset="1" stop-color="white" stop-opacity="1" />
</linearGradient>
<mask id="Mask" maskUnits="userSpaceOnUse"
x="0" y="0" width="800" height="300">
<rect x="0" y="0" width="800" height="300" fill="url(#Gradient)" />
</mask>
<text id="Text" x="400" y="200"
font-family="Verdana" font-size="100" text-anchor="middle" >
Masked text
</text>
</defs>
<!-- Draw a pale red rectangle in the background -->
<rect x="0" y="0" width="800" height="300" fill="#FF8080" />
<!-- Draw the text string twice. First, filled blue, with the mask applied.
Second, outlined in black without the mask. -->
<use xlink:href="#Text" fill="blue" mask="url(#Mask)" />
<use xlink:href="#Text" fill="none" stroke="black" stroke-width="2" />
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
Визначення атрибутів:
Properties inherit into the ‘mask’ element from its ancestors; properties do not inherit from the element referencing the ‘mask’ element.
‘mask’ elements are never rendered directly; their only usage is as something that can be referenced using the ‘mask’ property. ‘opacity’, ‘filter’ and ‘display’ properties do not apply to the ‘mask’ element; таким чином, ‘mask’ elements are not directly rendered even if the ‘display’ property is set to a value other than none, and ‘mask’ elements are available for referencing even when the ‘display’ property on the ‘mask’ element or any of its ancestors is set to none.
following is a description of the ‘mask’ property.
| Value: | <funciri> | none | inherit |
| Initial: | none |
| Applies to: | контейнерний елементи and графічний елементи |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
There are several opacity properties within SVG:
Except for object/group opacity (described just below), all other opacity properties are involved in intermediate rendering operations. Object/group opacity can be thought of conceptually as a postprocessing operation. Conceptually, after the object/group is rendered into an RGBA offscreen image, the object/group opacity setting specifies how to blend the offscreen image into the current background.
| Value: | <opacity-value> | inherit |
| Initial: | 1 |
| Applies to: | контейнерний елементи (except ‘mask’) and графічний елементи |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
Приклад opacity01 illustrates various usage of the ‘opacity’ property on elements and groups.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="3.5cm" viewBox="0 0 1200 350"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Приклад opacity01 - opacity property</desc>
<rect x="1" y="1" width="1198" height="348"
fill="none" stroke="blue" />
<!-- Background blue rectangle -->
<rect x="100" y="100" width="1000" height="150" fill="#0000ff" />
<!-- Red circles going from opaque to nearly transparent -->
<circle cx="200" cy="100" r="50" fill="red" opacity="1" />
<circle cx="400" cy="100" r="50" fill="red" opacity=".8" />
<circle cx="600" cy="100" r="50" fill="red" opacity=".6" />
<circle cx="800" cy="100" r="50" fill="red" opacity=".4" />
<circle cx="1000" cy="100" r="50" fill="red" opacity=".2" />
<!-- Opaque group, opaque circles -->
<g opacity="1" >
<circle cx="182.5" cy="250" r="50" fill="red" opacity="1" />
<circle cx="217.5" cy="250" r="50" fill="green" opacity="1" />
</g>
<!-- Group opacity: .5, opacity circles -->
<g opacity=".5" >
<circle cx="382.5" cy="250" r="50" fill="red" opacity="1" />
<circle cx="417.5" cy="250" r="50" fill="green" opacity="1" />
</g>
<!-- Opaque group, semi-transparent green over red -->
<g opacity="1" >
<circle cx="582.5" cy="250" r="50" fill="red" opacity=".5" />
<circle cx="617.5" cy="250" r="50" fill="green" opacity=".5" />
</g>
<!-- Opaque group, semi-transparent red over green -->
<g opacity="1" >
<circle cx="817.5" cy="250" r="50" fill="green" opacity=".5" />
<circle cx="782.5" cy="250" r="50" fill="red" opacity=".5" />
</g>
<!-- Group opacity .5, semi-transparent green over red -->
<g opacity=".5" >
<circle cx="982.5" cy="250" r="50" fill="red" opacity=".5" />
<circle cx="1017.5" cy="250" r="50" fill="green" opacity=".5" />
</g>
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
In the example above, the top row of circles have differing opacities, ranging from 1.0 to 0.2. bottom row illustrates five ‘g’ elements, each of which contains overlapping red and green circles, as follows:
Інтерфейс SVGClipPathElement : SVGElement, SVGTests, SVGLangSpace, SVGExternalResourcesRequired, SVGStylable, SVGTransformable, SVGUnitTypes { readonly attribute SVGAnimatedEnumeration clipPathUnits; };
Інтерфейс SVGMaskElement : SVGElement, SVGTests, SVGLangSpace, SVGExternalResourcesRequired, SVGStylable, SVGUnitTypes { readonly attribute SVGAnimatedEnumeration maskUnits; readonly attribute SVGAnimatedEnumeration maskContentUnits; readonly attribute SVGAnimatedLength x; readonly attribute SVGAnimatedLength y; readonly attribute SVGAnimatedLength width; readonly attribute SVGAnimatedLength height; };
This chapter описує SVG's declarative filter effects feature set, which when combined with the 2D power of SVG can describe much of the common artwork on the Web in such a way that client-side generation and alteration can be performed easily. In addition, the ability to apply filter effects to SVG графічний елементи and контейнерний елементи helps to maintain the semantic structure of the document, instead of resorting to images which aside from generally being a fixed resolution tend to obscure the original semantics елементуs they replace. This is especially true for effects applied to text.
A filter effect consists of a series of graphics operations that are applied to a given source graphic to produce a modified graphical result. result of the filter effect is rendered to the target device instead of the original source graphic. following illustrates the process:

Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
Filter effects are defined by ‘filter’ elements. To apply a filter effect to a графічний елемент or a контейнерний елемент, you set the значення the ‘filter’ property on the given element such that it references the filter effect.
Each ‘filter’ element contains a set of filter primitives as its children. Each filter primitive performs a single fundamental graphical operation (тобто, a blur or a lighting effect) on one or more inputs, producing a graphical result. Because most of the filter primitives represent some form of image processing, in most cases the output from a filter primitive is a single RGBA image.
original source graphic or the result from a filter primitive can бути використано as input into one or more other filter primitives. A common application is to use the source graphic multiple times. For example, a simple filter could replace one graphic by two by adding a black copy of original source graphic offset to create a drop shadow. In effect, there are now two layers of graphics, both with the same original source graphics.
When applied to контейнерний елементи such as ‘g’, the ‘filter’ property applies to the contents of the group as a whole. group's children do not render to the screen directly; instead, the graphics commands necessary to render the children are stored temporarily. Typically, the graphics commands are executed as part of the processing of the referenced ‘filter’ element via use of the keywords SourceGraphic or SourceAlpha. Filter effects can be applied to контейнерний елементи with no content (тобто, an empty ‘g’ element), in which case the SourceGraphic or SourceAlpha consist of a transparent black rectangle that is the size of the filter effects region.
Sometimes filter primitives result in undefined pixels. For example, filter primitive ‘feOffset’ can shift an image down and to the right, leaving undefined pixels at the top and left. In these cases, the undefined pixels are set to transparent black.
following shows an example of a filter effect.
Приклад filters01 - introducing filter effects.
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="7.5cm" height="5cm" viewBox="0 0 200 120"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Приклад filters01.svg - introducing filter effects</title>
<desc>An example which combines multiple filter primitives
to produce a 3D lighting effect on a graphic consisting
of the string "SVG" sitting on top of oval filled in red
and surrounded by an oval outlined in red.</desc>
<defs>
<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
<feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
<feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75"
specularExponent="20" lighting-color="#bbbbbb"
result="specOut">
<fePointLight x="-5000" y="-10000" z="20000"/>
</feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
<feMerge>
<feMergeNode in="offsetBlur"/>
<feMergeNode in="litPaint"/>
</feMerge>
</filter>
</defs>
<rect x="1" y="1" width="198" height="118" fill="#888888" stroke="blue" />
<g filter="url(#MyFilter)" >
<g>
<path fill="none" stroke="#D90000" stroke-width="10"
d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
<path fill="#D90000"
d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
<g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
<text x="52" y="76">SVG</text>
</g>
</g>
</g>
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
filter effect used in the example above is repeated here with reference numbers in the left column before each of the six filter primitives:
1 2 3 4 5 6 |
<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
<desc>Produces a 3D lighting effect.</desc>
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
<feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
<feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75"
specularExponent="20" lighting-color="#bbbbbb"
result="specOut">
<fePointLight x="-5000" y="-10000" z="20000"/>
</feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
<feMerge>
<feMergeNode in="offsetBlur"/>
<feMergeNode in="litPaint"/>
</feMerge>
</filter>
|
following pictures show the intermediate image results from each of the six filter elements:
|
|
|
|
|
|||
|
|
|
|
description of the ‘filter’ element follows:
Визначення атрибутів:
Properties inherit into the ‘filter’ element from its ancestors; properties do not inherit from the element referencing the ‘filter’ element.
‘filter’ elements are never rendered directly; their only usage is as something that can be referenced using the ‘filter’ property. ‘display’ property does not apply to the ‘filter’ element; таким чином, ‘filter’ elements are not directly rendered even if the ‘display’ property is set to a value other than none, and ‘filter’ elements are available for referencing even when the ‘display’ property on the ‘filter’ element or any of its ancestors is set to none.
description of the ‘filter’ property is as follows:
| Value: | <funciri> | none | inherit |
| Initial: | none |
| Applies to: | контейнерний елементи (except ‘mask’) and графічний елементи |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
A ‘filter’ element can define a region on the canvas to which a given filter effect applies and can provide a resolution for any intermediate continuous tone images used to process any raster-based filter primitives. ‘filter’ element has the following attributes which work together to define the filter effects region:
Defines the coordinate system for attributes ‘x’, ‘y’, ‘width’ and ‘height’.
Якщо filterUnits="userSpaceOnUse", ‘x’, ‘y’, ‘width’ and ‘height’ represent values in the current user coordinate system in place at the time when the ‘filter’ is referenced (тобто, the user coordinate system for the element referencing the ‘filter’ via a ‘filter’ property).
Якщо filterUnits="objectBoundingBox", then ‘x’, ‘y’, ‘width’ and ‘height’ represent fractions or percentages of the bounding box on the referencing element (дивіться Object bounding box units).
Якщо атрибут ‘filterUnits’ не вказано, тоді ефект is if a значення 'objectBoundingBox' were specified.
Анімується: так.
These attributes define a rectangular region on the canvas to which this filter applies.
amount of memory and processing time required to apply the filter are related to the size of this rectangle and the ‘filterRes’ attribute of the filter.
coordinate system for these attributes depends on the value for attribute ‘filterUnits’.
Negative values for ‘width’ or ‘height’ are an error (дивіться Обробка помилок). Zero values disable rendering елементу which referenced the filter.
bounds of this rectangle act as a hard clipping region for each filter primitive included with a given ‘filter’ element; таким чином, ifефект of a given filter primitive would extend beyond the bounds of the rectangle (this sometimes happens when using a ‘feGaussianBlur’ filter primitive with a very large ‘stdDeviation’), parts ofефект will get clipped.
Якщо ‘x’ or ‘y’ is not specified,ефект такий, якщо б було вказано значення -10% were specified.
Якщо ‘width’ or ‘height’ is not specified,ефект такий, якщо б було вказано значення 120% were specified.
Анімується: так.
This attribute takes the form x-pixels [y-pixels],
and indicates the width and height of the intermediate images in
pixels. Якщо not provided, then the користувацький агент will use
reasonable values to produce a high-quality result on the output
device.
Care should be taken when assigning a non-default value to this attribute. Too small of a value may result in unwanted pixelation in the result. Too large of a value may result in slow processing and large memory usage.
Negative values are an error (дивіться Обробка помилок). Zero values disable rendering елементу which referenced the filter.
Non-integer values are truncated, i.e rounded to the closest integer value towards zero.
Анімується: так.
Note that both of the two possible value for ‘filterUnits’ (тобто, 'objectBoundingBox' and 'userSpaceOnUse') result in a filter region whose coordinate system has its X-axis and Y-axis each parallel to the X-axis and Y-axis, respectively, of the user coordinate system for the element to which the filter will be applied.
Sometimes implementers can achieve faster performance when the filter region can be mapped directly to device pixels; таким чином, for best performance on display devices, it is suggested that authors define their region such that SVG користувацький агент can align the filter region pixel-for-pixel with the background. In particular, for best filter effects performance, avoid rotating or skewing the user coordinate system. Explicit values for attribute ‘filterRes’ can either help or harm performance. Якщо ‘filterRes’ is smaller than the automatic (тобто, default) filter resolution, then filter effect might have faster performance (usually at the expense of quality). Якщо ‘filterRes’ is larger than the automatic (тобто, default) filter resolution, then filter effects performance will usually be slower.
It is often necessary to provide padding space because the filter effect might impact bits slightly outside the tight-fitting bounding box on a given object. For these purposes, it is possible to provide negative percentage values for ‘x’ and ‘y’, and percentages values greater than 100% for ‘width’ and ‘height’. This, for example, is why the defaults for the filter effects region are x="-10%" y="-10%" width="120%" height="120%".
Two possible pseudo input images for filter effects are BackgroundImage and BackgroundAlpha, which each represent an image snapshot of the canvas under the filter region at the time that the ‘filter’ element is invoked. BackgroundImage represents both the color values and alpha channel of the canvas (тобто, RGBA pixel values), whereas BackgroundAlpha represents only the alpha channel.
Implementations of SVG користувацькі агенти often will need to maintain supplemental background image buffers in order to support the BackgroundImage and BackgroundAlpha pseudo input images. Sometimes, the background image buffers will contain an in-memory copy of the accumulated painting operations on the current canvas.
Because in-memory image buffers can take up significant system resources, SVG content must explicitly indicate to the SVG користувацький агент that the document needs access to the background image before BackgroundImage and BackgroundAlpha pseudo input images can бути використано. property which enables access to the background image is ‘enable-background’, defined below:
| Value: | accumulate | new [ <x> <y> <width> <height> ] | inherit |
| Initial: | accumulate |
| Applies to: | контейнерний елементи |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | no |
‘enable-background’ is only applicable to контейнерний елементи and specifies how the SVG користувацькі агенти manages the accumulation of the background image.
A значення new indicates two things:
A meaning of enable-background: accumulate (the initial/default value) depends on context:
Якщо a filter effect specifies either the BackgroundImage or the BackgroundAlpha pseudo input images and no ancestor контейнерний елемент has a property значення enable-background: new, then the background image request is technically in error. Processing will proceed without interruption (тобто, no error message) and a transparent black image shall be provided in response to the request.
optional <x>,<y>,<width>,<height> parameters on the new value are <number> values that indicate the subregion of the контейнерний елемент's user space where access to the background image is allowed to happen. These parameters enable the SVG користувацький агент potentially to allocate smaller temporary image buffers than the default values. Thus, the values <x>,<y>,<width>,<height> act as a clipping rectangle on the background image canvas. Negative values for <width> or <height> are an error (дивіться Обробка помилок). Якщо more than zero but less than four of the values <x>,<y>,<width> and <height> are specified or if zero values are specified for <width> or <height>, BackgroundImage and BackgroundAlpha are processed as if background image processing were not enabled.
Assume you have an element E in the document and that E has a series of ancestors A1 (its immediate parent), A2, etc. (Note: A0 is E.) Each ancestor Ai will have a corresponding temporary background image offscreen buffer BUFi. contents of the background image available to a ‘filter’ referenced by E is defined as follows:
Приклад enable-background-01 illustrates the rules for background image processing.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="13.5cm" height="2.7cm" viewBox="0 0 1350 270"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Приклад enable-background01</title>
<desc>This test case shows five pictures which illustrate the rules
for background image processing.</desc>
<defs>
<filter id="ShiftBGAndBlur"
filterUnits="userSpaceOnUse" x="0" y="0" width="1200" height="400">
<desc>
This filter discards the SourceGraphic, if any, and just produces
a result consisting of the BackgroundImage shifted down 125 units
and then blurred.
</desc>
<feOffset in="BackgroundImage" dx="0" dy="125" />
<feGaussianBlur stdDeviation="8" />
</filter>
<filter id="ShiftBGAndBlur_WithSourceGraphic"
filterUnits="userSpaceOnUse" x="0" y="0" width="1200" height="400">
<desc>
This filter takes the BackgroundImage, shifts it down 125 units, blurs it,
and then renders the SourceGraphic on top of the shifted/blurred background.
</desc>
<feOffset in="BackgroundImage" dx="0" dy="125" />
<feGaussianBlur stdDeviation="8" result="blur" />
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<g transform="translate(0,0)">
<desc> first picture is our reference graphic without filters.</desc>
<rect x="25" y="25" width="100" height="100" fill="red"/>
<g opacity=".5">
<circle cx="125" cy="75" r="45" fill="green"/>
<polygon points="160,25 160,125 240,75" fill="blue"/>
</g>
<rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
</g>
<g enable-background="new" transform="translate(270,0)">
<desc> second adds an empty 'g' element which invokes ShiftBGAndBlur.</desc>
<rect x="25" y="25" width="100" height="100" fill="red"/>
<g opacity=".5">
<circle cx="125" cy="75" r="45" fill="green"/>
<polygon points="160,25 160,125 240,75" fill="blue"/>
</g>
<g filter="url(#ShiftBGAndBlur)"/>
<rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
</g>
<g enable-background="new" transform="translate(540,0)">
<desc> third invokes ShiftBGAndBlur on the inner group.</desc>
<rect x="25" y="25" width="100" height="100" fill="red"/>
<g filter="url(#ShiftBGAndBlur)" opacity=".5">
<circle cx="125" cy="75" r="45" fill="green"/>
<polygon points="160,25 160,125 240,75" fill="blue"/>
</g>
<rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
</g>
<g enable-background="new" transform="translate(810,0)">
<desc> fourth invokes ShiftBGAndBlur on the triangle.</desc>
<rect x="25" y="25" width="100" height="100" fill="red"/>
<g opacity=".5">
<circle cx="125" cy="75" r="45" fill="green"/>
<polygon points="160,25 160,125 240,75" fill="blue"
filter="url(#ShiftBGAndBlur)"/>
</g>
<rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
</g>
<g enable-background="new" transform="translate(1080,0)">
<desc> fifth invokes ShiftBGAndBlur_WithSourceGraphic on the triangle.</desc>
<rect x="25" y="25" width="100" height="100" fill="red"/>
<g opacity=".5">
<circle cx="125" cy="75" r="45" fill="green"/>
<polygon points="160,25 160,125 240,75" fill="blue"
filter="url(#ShiftBGAndBlur_WithSourceGraphic)"/>
</g>
<rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
</g>
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
example above contains five parts, described as follows:
This section описує the various filter primtives that can be assembled to achieve a particular filter effect.
Unless otherwise stated, all image filters operate on premultiplied RGBA samples. Filters which work more naturally on non-premultiplied data (feColorMatrix and feComponentTransfer) will temporarily undo and redo premultiplication as specified. All raster effect filtering operations take 1 to N input RGBA images, additional attributes as parameters, and produce a single output RGBA image.
RGBA result from each filter primitive will be clamped into the allowable ranges for colors and opacity values. Thus, for example, the result from a given filter primitive will have any negative color values or opacity values adjusted up to color/opacity of zero.
color space in which a particular filter primitive performs its operations is determined by the значення property ‘color-interpolation-filters’ on the given filter primitive. A different property, ‘color-interpolation’ determines the color space for other color operations. Because these two properties have different initial values (‘color-interpolation-filters’ has an initial значення linearRGB whereas ‘color-interpolation’ has an initial значення sRGB), in some cases to achieve certain results (тобто, when coordinating gradient interpolation with a filtering operation) it will be necessary to explicitly set ‘color-interpolation’ to linearRGB or ‘color-interpolation-filters’ to sRGB on particular elements. Note that the examples below do not explicitly set either ‘color-interpolation’ or ‘color-interpolation-filters’, so the initial values for these properties apply to the examples.
With the exception of the ‘in’ attribute, all of the following attributes are available on all filter primitive elements:
Визначення атрибутів:
‘in’ attribute is available on all filter primitive elements that require an input.
Анімується: так.All filter primitives have attributes ‘x’, ‘y’, ‘width’ and ‘height’ which identify a subregion which restricts calculation and rendering of the given filter primitive. These attributes are defined according to the same rules as other filter primitives' coordinate and length attributes and thus represent values in the coordinate system established by attribute ‘primitiveUnits’ on the ‘filter’ element.
‘x’, ‘y’, ‘width’ and ‘height’ default to the union (тобто, tightest fitting bounding box) of the subregions defined for all referenced nodes. Якщо there are no referenced nodes (тобто, for ‘feImage’ or ‘feTurbulence’), or one or more of the referenced nodes is a standard input (one of SourceGraphic, SourceAlpha, BackgroundImage, BackgroundAlpha, FillPaint or StrokePaint), or for ‘feTile’ (which is special because its principal function is to replicate the referenced node in X and Y and thereby produce a usually larger result), the default subregion is 0%,0%,100%,100%, where as a special-case the percentages are relative to the dimensions of the filter region, thus making the the default filter primitive subregion equal to the filter region.
‘x’, ‘y’, ‘width’ and ‘height’ act as a hard clip clipping rectangle on both the filter primitive's input image(s) and the filter primitive result.
All intermediate offscreens are defined to not exceed the intersection of ‘x’, ‘y’, ‘width’ and ‘height’ with the filter region. filter region and any of the ‘x’, ‘y’, ‘width’ and ‘height’ subregions are to be set up such that all offscreens are made big enough to accommodate any pixels which even partly intersect with either the filter region or the x,y,width,height subregions.
‘feTile’ references a previous filter primitive and then stitches the tiles together based on the ‘x’, ‘y’, ‘width’ and ‘height’ values of the referenced filter primitive in order to fill its own filter primitive subregion.
Приклад primitive-subregion-01 demonstratesефект of specifying a filter primitive subregion:
<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="flood" x="0" y="0" width="100%" height="100%" primitiveUnits="objectBoundingBox">
<feFlood x="25%" y="25%" width="50%" height="50%"
flood-color="green" flood-opacity="0.75"/>
</filter>
<filter id="blend" primitiveUnits="objectBoundingBox">
<feBlend x="25%" y="25%" width="50%" height="50%"
in2="SourceGraphic" mode="multiply"/>
</filter>
<filter id="merge" primitiveUnits="objectBoundingBox">
<feMerge x="25%" y="25%" width="50%" height="50%">
<feMergeNode in="SourceGraphic"/>
<feMergeNode in="FillPaint"/>
</feMerge>
</filter>
</defs>
<g fill="none" stroke="blue" stroke-width="4">
<rect width="200" height="200"/>
<line x2="200" y2="200"/>
<line x1="200" y2="200"/>
</g>
<circle fill="green" filter="url(#flood)" cx="100" cy="100" r="90"/>
<g transform="translate(200 0)">
<g fill="none" stroke="blue" stroke-width="4">
<rect width="200" height="200"/>
<line x2="200" y2="200"/>
<line x1="200" y2="200"/>
</g>
<circle fill="green" filter="url(#blend)" cx="100" cy="100" r="90"/>
</g>
<g transform="translate(0 200)">
<g fill="none" stroke="blue" stroke-width="4">
<rect width="200" height="200"/>
<line x2="200" y2="200"/>
<line x1="200" y2="200"/>
</g>
<circle fill="green" fill-opacity="0.5" filter="url(#merge)" cx="100" cy="100" r="90"/>
</g>
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
In the example above there are three rects that each have a cross and a circle in them. circle element in each one has a different filter applied, but with the same filter primitive subregion. filter output should be limited to the filter primitive subregion, so you should never see the circles themselves, just the rects that make up the filter primitive subregion.
following sections define the elements that define a light source, ‘feDistantLight’, ‘fePointLight’ and ‘feSpotLight’, and property ‘lighting-color’, which defines the color of the light.
Визначення атрибутів:
following diagram illustrates the angles which ‘azimuth’ and ‘elevation’ represent in an XYZ coordinate system.
Визначення атрибутів:
Визначення атрибутів:
‘lighting-color’ property defines the color of the light source for filter primitives ‘feDiffuseLighting’ and ‘feSpecularLighting’.
| Value: | currentColor | <color> [<icccolor>] | inherit |
| Initial: | white |
| Applies to: | ‘feDiffuseLighting’ and ‘feSpecularLighting’ elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
This filter composites two objects together using commonly used imaging software blending modes. It performs a pixel-wise combination of two input images.
Визначення атрибутів:
For all feBlend modes, the result opacity is computed as follows:
qr = 1 - (1-qa)*(1-qb)
For the compositing formulas below, the following definitions apply:
cr = Result color (RGB) - premultiplied qa = Opacity value at a given pixel for image A qb = Opacity value at a given pixel for image B ca = Color (RGB) at a given pixel for image A - premultiplied cb = Color (RGB) at a given pixel for image B - premultiplied
following table provides the list of available image blending modes:
| Image Blending Mode | Formula for computing result color |
| normal | cr = (1 - qa) * cb + ca |
| multiply | cr = (1-qa)*cb + (1-qb)*ca + ca*cb |
| screen | cr = cb + ca - ca * cb |
| darken | cr = Min ((1 - qa) * cb + ca, (1 - qb) * ca + cb) |
| lighten | cr = Max ((1 - qa) * cb + ca, (1 - qb) * ca + cb) |
'normal' blend mode is equivalent to operator="over" on the ‘feComposite’ filter primitive, matches the blending method used by ‘feMerge’ and matches the simple alpha compositing technique used in SVG for all compositing outside of filter effects.
Приклад feBlend shows examples of the five blend modes.
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="5cm" viewBox="0 0 500 500"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Приклад feBlend - Прикладs of feBlend modes</title>
<desc>Five text strings blended into a gradient,
with one text string for each of the five feBlend modes.</desc>
<defs>
<linearGradient id="MyGradient" gradientUnits="userSpaceOnUse"
x1="100" y1="0" x2="300" y2="0">
<stop offset="0" stop-color="#000000" />
<stop offset=".33" stop-color="#ffffff" />
<stop offset=".67" stop-color="#ff0000" />
<stop offset="1" stop-color="#808080" />
</linearGradient>
<filter id="Normal">
<feBlend mode="normal" in2="BackgroundImage" in="SourceGraphic"/>
</filter>
<filter id="Multiply">
<feBlend mode="multiply" in2="BackgroundImage" in="SourceGraphic"/>
</filter>
<filter id="Screen">
<feBlend mode="screen" in2="BackgroundImage" in="SourceGraphic"/>
</filter>
<filter id="Darken">
<feBlend mode="darken" in2="BackgroundImage" in="SourceGraphic"/>
</filter>
<filter id="Lighten">
<feBlend mode="lighten" in2="BackgroundImage" in="SourceGraphic"/>
</filter>
</defs>
<rect fill="none" stroke="blue"
x="1" y="1" width="498" height="498"/>
<g enable-background="new" >
<rect x="100" y="20" width="300" height="460" fill="url(#MyGradient)" />
<g font-family="Verdana" font-size="75" fill="#888888" fill-opacity=".6" >
<text x="50" y="90" filter="url(#Normal)" >Normal</text>
<text x="50" y="180" filter="url(#Multiply)" >Multiply</text>
<text x="50" y="270" filter="url(#Screen)" >Screen</text>
<text x="50" y="360" filter="url(#Darken)" >Darken</text>
<text x="50" y="450" filter="url(#Lighten)" >Lighten</text>
</g>
</g>
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
This filter applies a matrix transformation:
| R' | | a00 a01 a02 a03 a04 | | R | | G' | | a10 a11 a12 a13 a14 | | G | | B' | = | a20 a21 a22 a23 a24 | * | B | | A' | | a30 a31 a32 a33 a34 | | A | | 1 | | 0 0 0 0 1 | | 1 |
on the RGBA color and alpha values of every pixel on the input graphics to produce a result with a new set of RGBA color and alpha values.
calculations are performed on non-premultiplied color values. Якщо the input graphics consists of premultiplied color values, those values are automatically converted into non-premultiplied color values for this operation.
These matrices often perform an identity mapping in the alpha channel. Якщо that is the case, an implementation can avoid the costly undoing and redoing of the premultiplication for all pixels with A = 1.
Визначення атрибутів:
type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"
| R' | |0.213+0.787s 0.715-0.715s 0.072-0.072s 0 0 | | R | | G' | |0.213-0.213s 0.715+0.285s 0.072-0.072s 0 0 | | G | | B' | = |0.213-0.213s 0.715-0.715s 0.072+0.928s 0 0 | * | B | | A' | | 0 0 0 1 0 | | A | | 1 | | 0 0 0 0 1 | | 1 |
| R' | | a00 a01 a02 0 0 | | R | | G' | | a10 a11 a12 0 0 | | G | | B' | = | a20 a21 a22 0 0 | * | B | | A' | | 0 0 0 1 0 | | A | | 1 | | 0 0 0 0 1 | | 1 |where the terms a00, a01, etc. are calculated as follows:
| a00 a01 a02 | [+0.213 +0.715 +0.072]
| a10 a11 a12 | = [+0.213 +0.715 +0.072] +
| a20 a21 a22 | [+0.213 +0.715 +0.072]
[+0.787 -0.715 -0.072]
cos(hueRotate value) * [-0.213 +0.285 -0.072] +
[-0.213 -0.715 +0.928]
[-0.213 -0.715+0.928]
sin(hueRotate value) * [+0.143 +0.140-0.283]
[-0.787 +0.715+0.072]
Thus, the upper left term of the hue matrix turns out to be:
.213 + cos(hueRotate value)*.787 - sin(hueRotate value)*.213
| R' | | 0 0 0 0 0 | | R | | G' | | 0 0 0 0 0 | | G | | B' | = | 0 0 0 0 0 | * | B | | A' | | 0.2125 0.7154 0.0721 0 0 | | A | | 1 | | 0 0 0 0 1 | | 1 |
Приклад feColorMatrix shows examples of the four types of feColorMatrix operations.
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="8cm" height="5cm" viewBox="0 0 800 500"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Приклад feColorMatrix - Прикладs of feColorMatrix operations</title>
<desc>Five text strings showingефектs of feColorMatrix:
an unfiltered text string acting as a reference,
use of the feColorMatrix matrix option to convert to grayscale,
use of the feColorMatrix saturate option,
use of the feColorMatrix hueRotate option,
and use of the feColorMatrix luminanceToAlpha option.</desc>
<defs>
<linearGradient id="MyGradient" gradientUnits="userSpaceOnUse"
x1="100" y1="0" x2="500" y2="0">
<stop offset="0" stop-color="#ff00ff" />
<stop offset=".33" stop-color="#88ff88" />
<stop offset=".67" stop-color="#2020ff" />
<stop offset="1" stop-color="#d00000" />
</linearGradient>
<filter id="Matrix" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feColorMatrix type="matrix" in="SourceGraphic"
values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0"/>
</filter>
<filter id="Saturate40" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feColorMatrix type="saturate" in="SourceGraphic" values="0.4"/>
</filter>
<filter id="HueRotate90" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feColorMatrix type="hueRotate" in="SourceGraphic" values="90"/>
</filter>
<filter id="LuminanceToAlpha" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feColorMatrix type="luminanceToAlpha" in="SourceGraphic" result="a"/>
<feComposite in="SourceGraphic" in2="a" operator="in" />
</filter>
</defs>
<rect fill="none" stroke="blue"
x="1" y="1" width="798" height="498"/>
<g font-family="Verdana" font-size="75"
font-weight="bold" fill="url(#MyGradient)" >
<rect x="100" y="0" width="500" height="20" />
<text x="100" y="90">Unfiltered</text>
<text x="100" y="190" filter="url(#Matrix)" >Matrix</text>
<text x="100" y="290" filter="url(#Saturate40)" >Saturate</text>
<text x="100" y="390" filter="url(#HueRotate90)" >HueRotate</text>
<text x="100" y="490" filter="url(#LuminanceToAlpha)" >Luminance</text>
</g>
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
This filter primitive performs component-wise remapping of data as follows:
R' = feFuncR( R ) G' = feFuncG( G ) B' = feFuncB( B ) A' = feFuncA( A )
for every pixel. It allows operations like brightness adjustment, contrast adjustment, color balance or thresholding.
calculations are performed on non-premultiplied color values. Якщо the input graphics consists of premultiplied color values, those values are automatically converted into non-premultiplied color values for this operation. (Note that the undoing and redoing of the premultiplication can be avoided if feFuncA is the identity transform and all alpha values on the source graphic are set to 1.)
child elements of a ‘feComponentTransfer’ element specify the transfer functions for the four channels:
following rules apply to the processing of the ‘feComponentTransfer’ element:
attributes below are the transfer function element attributes, which apply to sub-elements ‘feFuncR’, ‘feFuncG’, ‘feFuncB’ and ‘feFuncA’ that define the transfer functions.
Визначення атрибутів:
Вказує the type of component transfer function. type of function determines the applicability of the other attributes.
In the following, C is the initial component (тобто, ‘feFuncR’), C' is the remapped component; both in the closed interval [0,1].
C' = C
For a value C < 1 find k such
that:
k/n <= C < (k+1)/n
result C' is given by:
C' = vk + (C - k/n)*n * (vk+1 - vk)
Якщо C = 1 then:
C' = vn.
For a value C < 1 find k such
that:
k/n <= C < (k+1)/n
result C' is given by:
C' = vk
Якщо C = 1 then:
C' = vn-1.
Приклад feComponentTransfer shows examples of the four types of feComponentTransfer operations.
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="8cm" height="4cm" viewBox="0 0 800 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Приклад feComponentTransfer - Прикладs of feComponentTransfer operations</title>
<desc>Four text strings showingефектs of feComponentTransfer:
an identity function acting as a reference,
use of the feComponentTransfer table option,
use of the feComponentTransfer linear option,
and use of the feComponentTransfer gamma option.</desc>
<defs>
<linearGradient id="MyGradient" gradientUnits="userSpaceOnUse"
x1="100" y1="0" x2="600" y2="0">
<stop offset="0" stop-color="#ff0000" />
<stop offset=".33" stop-color="#00ff00" />
<stop offset=".67" stop-color="#0000ff" />
<stop offset="1" stop-color="#000000" />
</linearGradient>
<filter id="Identity" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feComponentTransfer>
<feFuncR type="identity"/>
<feFuncG type="identity"/>
<feFuncB type="identity"/>
<feFuncA type="identity"/>
</feComponentTransfer>
</filter>
<filter id="Table" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feComponentTransfer>
<feFuncR type="table" tableValues="0 0 1 1"/>
<feFuncG type="table" tableValues="1 1 0 0"/>
<feFuncB type="table" tableValues="0 1 1 0"/>
</feComponentTransfer>
</filter>
<filter id="Linear" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feComponentTransfer>
<feFuncR type="linear" slope=".5" intercept=".25"/>
<feFuncG type="linear" slope=".5" intercept="0"/>
<feFuncB type="linear" slope=".5" intercept=".5"/>
</feComponentTransfer>
</filter>
<filter id="Gamma" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feComponentTransfer>
<feFuncR type="gamma" amplitude="2" exponent="5" offset="0"/>
<feFuncG type="gamma" amplitude="2" exponent="3" offset="0"/>
<feFuncB type="gamma" amplitude="2" exponent="1" offset="0"/>
</feComponentTransfer>
</filter>
</defs>
<rect fill="none" stroke="blue"
x="1" y="1" width="798" height="398"/>
<g font-family="Verdana" font-size="75"
font-weight="bold" fill="url(#MyGradient)" >
<rect x="100" y="0" width="600" height="20" />
<text x="100" y="90">Identity</text>
<text x="100" y="190" filter="url(#Table)" >TableLookup</text>
<text x="100" y="290" filter="url(#Linear)" >LinearFunc</text>
<text x="100" y="390" filter="url(#Gamma)" >GammaFunc</text>
</g>
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
This filter performs the combination of the two input images pixel-wise in image space using one of the Porter-Duff [PORTERDUFF] compositing Операції: over, in, atop, out, xor [SVG-COMPOSITING]. Additionally, a component-wise arithmetic operation (with the result clamped between [0..1]) can be applied.
arithmetic operation is useful for combining the output from the ‘feDiffuseLighting’ and ‘feSpecularLighting’ filters with texture data. It is also useful for implementing dissolve. Якщо the arithmetic operation is chosen, each result pixel is computed using the following formula:
result = k1*i1*i2 + k2*i1 + k3*i2 + k4where:
i1 and i2 indicate the corresponding
pixel channel values of the input image, which map to in and in2
respectively k1, k2, k3 and k4 indicate the values
of the attributes with the same name For this filter primitive, the extent of the resulting image might grow as described in the section that описує the filter primitive subregion.
Визначення атрибутів:
Приклад feComposite shows examples of the six types of feComposite operations. It also shows two different techniques to using the BackgroundImage as part of the compositing operation.
first two rows render bluish triangles into the background. A filter is applied which composites reddish triangles into the bluish triangles using one of the compositing operations. result from compositing is drawn onto an opaque white temporary surface, and then that result is written to the canvas. ( opaque white temporary surface obliterates the original bluish triangle.)
last two rows apply the same compositing operations of reddish triangles into bluish triangles. Однак, the compositing result is directly blended into the canvas (the opaque white temporary surface technique is not used). In some cases, the results are different than when a temporary opaque white surface is used. original bluish triangle from the background shines through wherever the compositing operation results in completely transparent pixel. In other cases, the result from compositing is blended into the bluish triangle, resulting in a different final color value.
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="330" height="195" viewBox="0 0 1100 650" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Приклад feComposite - Прикладs of feComposite operations</title>
<desc>Four rows of six pairs of overlapping triangles depicting
the six different feComposite operators under different
opacity values and different clearing of the background.</desc>
<defs>
<desc>Define two sets of six filters for each of the six compositing operators.
first set wipes out the background image by flooding with opaque white.
second set does not wipe out the background, with the result
that the background sometimes shines through and is other cases
is blended into itself (тобто, "double-counting").</desc>
<filter id="overFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
<feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
<feComposite in="SourceGraphic" in2="BackgroundImage" operator="over" result="comp"/>
<feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
</filter>
<filter id="inFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
<feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
<feComposite in="SourceGraphic" in2="BackgroundImage" operator="in" result="comp"/>
<feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
</filter>
<filter id="outFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
<feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
<feComposite in="SourceGraphic" in2="BackgroundImage" operator="out" result="comp"/>
<feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
</filter>
<filter id="atopFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
<feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
<feComposite in="SourceGraphic" in2="BackgroundImage" operator="atop" result="comp"/>
<feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
</filter>
<filter id="xorFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
<feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
<feComposite in="SourceGraphic" in2="BackgroundImage" operator="xor" result="comp"/>
<feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
</filter>
<filter id="arithmeticFlood" filterUnits="objectBoundingBox"
x="-5%" y="-5%" width="110%" height="110%">
<feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
<feComposite in="SourceGraphic" in2="BackgroundImage" result="comp"
operator="arithmetic" k1=".5" k2=".5" k3=".5" k4=".5"/>
<feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
</filter>
<filter id="overNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
<feComposite in="SourceGraphic" in2="BackgroundImage" operator="over" result="comp"/>
</filter>
<filter id="inNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
<feComposite in="SourceGraphic" in2="BackgroundImage" operator="in" result="comp"/>
</filter>
<filter id="outNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
<feComposite in="SourceGraphic" in2="BackgroundImage" operator="out" result="comp"/>
</filter>
<filter id="atopNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
<feComposite in="SourceGraphic" in2="BackgroundImage" operator="atop" result="comp"/>
</filter>
<filter id="xorNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
<feComposite in="SourceGraphic" in2="BackgroundImage" operator="xor" result="comp"/>
</filter>
<filter id="arithmeticNoFlood" filterUnits="objectBoundingBox"
x="-5%" y="-5%" width="110%" height="110%">
<feComposite in="SourceGraphic" in2="BackgroundImage" result="comp"
operator="arithmetic" k1=".5" k2=".5" k3=".5" k4=".5"/>
</filter>
<path id="Blue100" d="M 0 0 L 100 0 L 100 100 z" fill="#00ffff" />
<path id="Red100" d="M 0 0 L 0 100 L 100 0 z" fill="#ff00ff" />
<path id="Blue50" d="M 0 125 L 100 125 L 100 225 z" fill="#00ffff" fill-opacity=".5" />
<path id="Red50" d="M 0 125 L 0 225 L 100 125 z" fill="#ff00ff" fill-opacity=".5" />
<g id="TwoBlueTriangles">
<use xlink:href="#Blue100"/>
<use xlink:href="#Blue50"/>
</g>
<g id="BlueTriangles">
<use transform="translate(275,25)" xlink:href="#TwoBlueTriangles"/>
<use transform="translate(400,25)" xlink:href="#TwoBlueTriangles"/>
<use transform="translate(525,25)" xlink:href="#TwoBlueTriangles"/>
<use transform="translate(650,25)" xlink:href="#TwoBlueTriangles"/>
<use transform="translate(775,25)" xlink:href="#TwoBlueTriangles"/>
<use transform="translate(900,25)" xlink:href="#TwoBlueTriangles"/>
</g>
</defs>
<rect fill="none" stroke="blue" x="1" y="1" width="1098" height="648"/>
<g font-family="Verdana" font-size="40" shape-rendering="crispEdges">
<desc>Render the examples using the filters that draw on top of
an opaque white surface, thus obliterating the background.</desc>
<g enable-background="new">
<text x="15" y="75">opacity 1.0</text>
<text x="15" y="115" font-size="27">(with feFlood)</text>
<text x="15" y="200">opacity 0.5</text>
<text x="15" y="240" font-size="27">(with feFlood)</text>
<use xlink:href="#BlueTriangles"/>
<g transform="translate(275,25)">
<use xlink:href="#Red100" filter="url(#overFlood)" />
<use xlink:href="#Red50" filter="url(#overFlood)" />
<text x="5" y="275">over</text>
</g>
<g transform="translate(400,25)">
<use xlink:href="#Red100" filter="url(#inFlood)" />
<use xlink:href="#Red50" filter="url(#inFlood)" />
<text x="35" y="275">in</text>
</g>
<g transform="translate(525,25)">
<use xlink:href="#Red100" filter="url(#outFlood)" />
<use xlink:href="#Red50" filter="url(#outFlood)" />
<text x="15" y="275">out</text>
</g>
<g transform="translate(650,25)">
<use xlink:href="#Red100" filter="url(#atopFlood)" />
<use xlink:href="#Red50" filter="url(#atopFlood)" />
<text x="10" y="275">atop</text>
</g>
<g transform="translate(775,25)">
<use xlink:href="#Red100" filter="url(#xorFlood)" />
<use xlink:href="#Red50" filter="url(#xorFlood)" />
<text x="15" y="275">xor</text>
</g>
<g transform="translate(900,25)">
<use xlink:href="#Red100" filter="url(#arithmeticFlood)" />
<use xlink:href="#Red50" filter="url(#arithmeticFlood)" />
<text x="-25" y="275">arithmetic</text>
</g>
</g>
<g transform="translate(0,325)" enable-background="new">
<desc>Render the examples using the filters that do not obliterate
the background, thus sometimes causing the background to continue
to appear in some cases, and in other cases the background
image blends into itself ("double-counting").</desc>
<text x="15" y="75">opacity 1.0</text>
<text x="15" y="115" font-size="27">(without feFlood)</text>
<text x="15" y="200">opacity 0.5</text>
<text x="15" y="240" font-size="27">(without feFlood)</text>
<use xlink:href="#BlueTriangles"/>
<g transform="translate(275,25)">
<use xlink:href="#Red100" filter="url(#overNoFlood)" />
<use xlink:href="#Red50" filter="url(#overNoFlood)" />
<text x="5" y="275">over</text>
</g>
<g transform="translate(400,25)">
<use xlink:href="#Red100" filter="url(#inNoFlood)" />
<use xlink:href="#Red50" filter="url(#inNoFlood)" />
<text x="35" y="275">in</text>
</g>
<g transform="translate(525,25)">
<use xlink:href="#Red100" filter="url(#outNoFlood)" />
<use xlink:href="#Red50" filter="url(#outNoFlood)" />
<text x="15" y="275">out</text>
</g>
<g transform="translate(650,25)">
<use xlink:href="#Red100" filter="url(#atopNoFlood)" />
<use xlink:href="#Red50" filter="url(#atopNoFlood)" />
<text x="10" y="275">atop</text>
</g>
<g transform="translate(775,25)">
<use xlink:href="#Red100" filter="url(#xorNoFlood)" />
<use xlink:href="#Red50" filter="url(#xorNoFlood)" />
<text x="15" y="275">xor</text>
</g>
<g transform="translate(900,25)">
<use xlink:href="#Red100" filter="url(#arithmeticNoFlood)" />
<use xlink:href="#Red50" filter="url(#arithmeticNoFlood)" />
<text x="-25" y="275">arithmetic</text>
</g>
</g>
</g>
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
feConvolveMatrix applies a matrix convolution filter effect. A convolution combines pixels in the input image with neighboring pixels to produce a resulting image. A wide variety of imaging operations can be achieved through convolutions, including blurring, edge detection, sharpening, embossing and beveling.
A matrix convolution is based on an n-by-m matrix (the convolution kernel) which описує how a given pixel value in the input image is combined with its neighboring pixel values to produce a resulting pixel value. Each result pixel is determined by applying the kernel matrix to the corresponding source pixel and its neighboring pixels. basic convolution formula which is applied to each color value for a given pixel is:
COLORX,Y = (
SUM I=0 to [orderY-1] {
SUM J=0 to [orderX-1] {
SOURCE X-targetX+J, Y-targetY+I *
kernelMatrixorderX-J-1,
orderY-I-1
}
}
) / divisor +
bias * ALPHAX,Y
where "orderX" and "orderY" represent the X and Y values for the ‘order’ attribute, "targetX" represents the значення the ‘targetX’ attribute, "targetY" represents the значення the ‘targetY’ attribute, "kernelMatrix" represents the значення the ‘kernelMatrix’ attribute, "divisor" represents the значення the ‘divisor’ attribute, and "bias" represents the значення the ‘bias’ attribute.
Note in the above formulas that the values in the kernel matrix are applied such that the kernel matrix is rotated 180 degrees relative to the source and destination images in order to match convolution theory as described in many computer graphics textbooks.
To illustrate, suppose you have a input image which is 5 pixels by 5 pixels, whose color values for one of the color channels are as follows:
0 20 40 235 235 100 120 140 235 235 200 220 240 235 235 225 225 255 255 255 225 225 255 255 255
and you define a 3-by-3 convolution kernel as follows:
1 2 3 4 5 6 7 8 9
Let's focus on the color value at the second row and second column of the image (source pixel value is 120). Assuming the simplest case (where the input image's pixel grid aligns perfectly with the kernel's pixel grid) and assuming default values for attributes ‘divisor’, ‘targetX’ and ‘targetY’, then resulting color value will be:
(9* 0 + 8* 20 + 7* 40 + 6*100 + 5*120 + 4*140 + 3*200 + 2*220 + 1*240) / (9+8+7+6+5+4+3+2+1)
Because they operate on pixels, matrix convolutions are inherently resolution-dependent. To make ‘feConvolveMatrix’ produce resolution-independent results, an explicit value should be provided for either the ‘filterRes’ attribute on the ‘filter’ element and/or attribute ‘kernelUnitLength’.
‘kernelUnitLength’, in combination with the other attributes, defines an implicit pixel grid in the filter effects coordinate system (тобто, the coordinate system established by the ‘primitiveUnits’ attribute). Якщо the pixel grid established by ‘kernelUnitLength’ is not scaled to match the pixel grid established by attribute ‘filterRes’ (implicitly or explicitly), then the input image will be temporarily rescaled to match its pixels with ‘kernelUnitLength’. convolution happens on the resampled image. After applying the convolution, the image is resampled back to the original resolution.
When the image must be resampled to match the coordinate system defined by ‘kernelUnitLength’ prior to convolution, or resampled to match the device coordinate system after convolution, it is recommended that high quality viewers make use of appropriate interpolation techniques, for example bilinear or bicubic. Depending on the speed of the available interpolents, this choice may be affected by the ‘image-rendering’ property setting. Note that implementations might choose approaches that minimize or eliminate resampling when not necessary to produce proper results, such as when the document is zoomed out such that ‘kernelUnitLength’ is considerably smaller than a device pixel.
Визначення атрибутів:
Determines how to extend the input image as necessary with color values so that the matrix operations can be applied when the kernel is positioned at or near the edge of the input image.
"duplicate" indicates that the input image is extended along each of its borders as necessary by duplicating the color values at the given edge of the input image.
Original N-by-M image, where m=M-1 and n=N-1:
11 12 ... 1m 1M
21 22 ... 2m 2M
.. .. ... .. ..
n1 n2 ... nm nM
N1 N2 ... Nm NM
Extended by two pixels using "duplicate":
11 11 11 12 ... 1m 1M 1M 1M
11 11 11 12 ... 1m 1M 1M 1M
11 11 11 12 ... 1m 1M 1M 1M
21 21 21 22 ... 2m 2M 2M 2M
.. .. .. .. ... .. .. .. ..
n1 n1 n1 n2 ... nm nM nM nM
N1 N1 N1 N2 ... Nm NM NM NM
N1 N1 N1 N2 ... Nm NM NM NM
N1 N1 N1 N2 ... Nm NM NM NM
"wrap" indicates that the input image is extended by taking the color values from the opposite edge of the image.
Extended by two pixels using "wrap": nm nM n1 n2 ... nm nM n1 n2 Nm NM N1 N2 ... Nm NM N1 N2 1m 1M 11 12 ... 1m 1M 11 12 2m 2M 21 22 ... 2m 2M 21 22 .. .. .. .. ... .. .. .. .. nm nM n1 n2 ... nm nM n1 n2 Nm NM N1 N2 ... Nm NM N1 N2 1m 1M 11 12 ... 1m 1M 11 12 2m 2M 21 22 ... 2m 2M 21 22
"none" indicates that the input image is extended with pixel values of zero for R, G, B and A.
Якщо атрибут ‘edgeMode’ не вказано, тоді ефект такий, якщо б було вказано значення duplicate were specified.
Анімується: так.
ALPHAX,Y of the convolution formula
for a given pixel is:
ALPHAX,Y = (
SUM I=0 to [orderY-1] {
SUM J=0 to [orderX-1] {
SOURCE X-targetX+J, Y-targetY+I *
kernelMatrixorderX-J-1,
orderY-I-1
}
}
) / divisor +
bias
ALPHAX,Y of the convolution
formula for a given pixel is:
ALPHAX,Y = SOURCEX,Y
This filter primitive lights an image using the alpha channel as a bump map. resulting image is an RGBA opaque image based on the light color with alpha = 1.0 everywhere. lighting calculation follows the standard diffuse component of the Phong lighting model. resulting image depends on the light color, light position and surface geometry of the input bump map.
light map produced by this filter primitive can be combined with a texture image using the multiply term of the arithmetic ‘feComposite’ compositing method. Multiple light sources can be simulated by adding several of these light maps together before applying it to the texture image.
formulas below make use of 3x3 filters. Because they operate on pixels, such filters are inherently resolution-dependent. To make ‘feDiffuseLighting’ produce resolution-independent results, an explicit value should be provided for either the ‘filterRes’ attribute on the ‘filter’ element and/or attribute ‘kernelUnitLength’.
‘kernelUnitLength’, in combination with the other attributes, defines an implicit pixel grid in the filter effects coordinate system (тобто, the coordinate system established by the ‘primitiveUnits’ attribute). Якщо the pixel grid established by ‘kernelUnitLength’ is not scaled to match the pixel grid established by attribute ‘filterRes’ (implicitly or explicitly), then the input image will be temporarily rescaled to match its pixels with ‘kernelUnitLength’. 3x3 filters are applied to the resampled image. After applying the filter, the image is resampled back to its original resolution.
When the image must be resampled, it is recommended that high quality viewers make use of appropriate interpolation techniques, for example bilinear or bicubic. Depending on the speed of the available interpolents, this choice may be affected by the ‘image-rendering’ property setting. Note that implementations might choose approaches that minimize or eliminate resampling when not necessary to produce proper results, such as when the document is zoomed out such that ‘kernelUnitLength’ is considerably smaller than a device pixel.
For the formulas that follow, the Norm(Ax,Ay,Az)
function is defined as:
Norm(Ax,Ay,Az) = sqrt(Ax^2+Ay^2+Az^2)
resulting RGBA image is computed as follows:
Dr = kd * N.L * Lr
Dg = kd * N.L * Lg
Db = kd * N.L * Lb
Da = 1.0
where
N is a function of x and y and depends on the surface gradient as follows:
surface described by the input alpha image I(x,y) is:
Z (x,y) = surfaceScale * I(x,y)
Surface normal is calculated using the Sobel gradient 3x3 filter. Different filter kernels are used depending on whether the given pixel is on the interior or an edge. For each case, the formula is:
Nx (x,y)= - surfaceScale * FACTORx
*
(Kx(0,0)*I(x-dx,y-dy) + Kx(1,0)*I(x,y-dy) +
Kx(2,0)*I(x+dx,y-dy) +
Kx(0,1)*I(x-dx,y) + Kx(1,1)*I(x,y) +
Kx(2,1)*I(x+dx,y) +
Kx(0,2)*I(x-dx,y+dy) + Kx(1,2)*I(x,y+dy) +
Kx(2,2)*I(x+dx,y+dy))
Ny (x,y)= - surfaceScale * FACTORy *
(Ky(0,0)*I(x-dx,y-dy) + Ky(1,0)*I(x,y-dy) +
Ky(2,0)*I(x+dx,y-dy) +
Ky(0,1)*I(x-dx,y) + Ky(1,1)*I(x,y) +
Ky(2,1)*I(x+dx,y) +
Ky(0,2)*I(x-dx,y+dy) + Ky(1,2)*I(x,y+dy) +
Ky(2,2)*I(x+dx,y+dy))
Nz (x,y) = 1.0
N = (Nx, Ny, Nz) / Norm((Nx,Ny,Nz))
In these formulas, the dx and dy values
(тобто, I(x-dx,y-dy)), represent deltas relative to a
given (x,y) position for the purpose of estimating the
slope of the surface at that point. These deltas are determined by the
value (explicit or implicit) of attribute ‘kernelUnitLength’.
|
Top/left corner: FACTORx=2/(3*dx) |
Top row: FACTORx=1/(3*dx) |
Top/right corner: FACTORx=2/(3*dx) |
|
Left column: FACTORx=1/(2*dx) |
Interior pixels: FACTORx=1/(4*dx) |
Right column: FACTORx=1/(2*dx) |
|
Bottom/left corner: FACTORx=2/(3*dx) |
Bottom row: FACTORx=1/(3*dx) |
Bottom/right corner: FACTORx=2/(3*dx) |
L, the unit vector from the image sample to the light, is calculated as follows:
For Infinite light sources it is constant:
Lx = cos(azimuth)*cos(elevation)
Ly = sin(azimuth)*cos(elevation)
Lz = sin(elevation)
For Point and spot lights it is a function of position:
Lx = Lightx - x
Ly = Lighty - y
Lz = Lightz - Z(x,y)
L = (Lx, Ly, Lz) / Norm(Lx,
Ly, Lz)
where Lightx, Lighty, and Lightz are the input light position.
Lr,Lg,Lb, the light color vector, is a function of position in the spot light case only:
Lr = Lightr*pow((-L.S),specularExponent)
Lg = Lightg*pow((-L.S),specularExponent)
Lb = Lightb*pow((-L.S),specularExponent)
where S is the unit vector pointing from the light to the point (pointsAtX, pointsAtY, pointsAtZ) in the x-y plane:
Sx = pointsAtX - Lightx
Sy = pointsAtY - Lighty
Sz = pointsAtZ - Lightz
S = (Sx, Sy, Sz) / Norm(Sx,
Sy, Sz)
Якщо L.S is positive, no light is present. (Lr = Lg = Lb = 0). Якщо ‘limitingConeAngle’ is specified, -L.S < cos(limitingConeAngle) also indicates that no light is present.
Визначення атрибутів:
dx
and dy, respectively, in the surface
normal calculation formulas. By specifying value(s) for ‘kernelUnitLength’, the kernel
becomes defined in a scalable, abstract coordinate system. Якщо ‘kernelUnitLength’
is not specified, the dx and dy values
should represent very small deltas relative to a given (x,y)
position, which might be implemented in some cases as one pixel in
the intermediate image offscreen bitmap, which is a pixel-based
coordinate system, and thus potentially not scalable. For some level
of consistency across display media and користувацькі агенти, it is
necessary that a value be provided for at least one of ‘filterRes’ and ‘kernelUnitLength’. Discussion of
intermediate images are in the Introduction
and in the description of attribute ‘filterRes’.light source is defined by one of the child elements ‘feDistantLight’, ‘fePointLight’ or ‘feSpotLight’. light color is specified by property ‘lighting-color’.
This filter primitive uses the pixels values from the image from ‘in2’ to spatially displace the image from ‘in’. This is the transformation to be performed:
P'(x,y) <- P( x + scale * (XC(x,y) - .5), y + scale * (YC(x,y) - .5))
where P(x,y) is the input image, ‘in’, and P'(x,y) is the destination. XC(x,y) and YC(x,y) are the component values of the channel designated by the xChannelSelector and yChannelSelector. For example, to use the R component of ‘in2’ to control displacement in x and the G component of Image2 to control displacement in y, set xChannelSelector to "R" and yChannelSelector to "G".
displacement map defines the inverse of the mapping performed.
input image in is to remain premultiplied for this filter primitive. calculations using the pixel values from ‘in2’ are performed using non-premultiplied color values. Якщо the image from ‘in2’ consists of premultiplied color values, those values are automatically converted into non-premultiplied color values before performing this operation.
This filter can have arbitrary non-localized effect on the input which might require substantial buffering in the processing pipeline. However with this formulation, any intermediate buffering needs can be determined by scale which represents the maximum range of displacement in either x or y.
When applying this filter, the source pixel location will often lie between several source pixels. In this case it is recommended that high quality viewers apply an interpolent on the surrounding pixels, for example bilinear or bicubic, rather than simply selecting the nearest source pixel. Depending on the speed of the available interpolents, this choice may be affected by the ‘image-rendering’ property setting.
‘color-interpolation-filters’ property only applies to the ‘in2’ source image and does not apply to the ‘in’ source image. ‘in’ source image must remain in its current color space.
Визначення атрибутів:
This filter primitive creates a rectangle filled with the color and opacity values from properties ‘flood-color’ and ‘flood-opacity’. rectangle is as large as the filter primitive subregion established by the ‘x’, ‘y’, ‘width’ and ‘height’ attributes on the ‘feFlood’ element.
‘flood-color’ property indicates what color to use to flood the current filter primitive subregion. keyword currentColor and ICC colors can be specified in the same manner as within a <paint> specification for the ‘fill’ and ‘stroke’ properties.
| Value: | currentColor | <color> [<icccolor>] | inherit |
| Initial: | black |
| Applies to: | ‘feFlood’ elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
‘flood-opacity’ property defines the opacity value to use across the entire filter primitive subregion.
| Value: | <opacity-value> | inherit |
| Initial: | 1 |
| Applies to: | ‘feFlood’ elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
This filter primitive performs a Gaussian blur on the input image.
Gaussian blur kernel is an approximation of the normalized convolution:
G(x,y) = H(x)I(y)
where
H(x) = exp(-x2/ (2s2)) / sqrt(2* pi*s2)
and
I(y) = exp(-y2/ (2t2)) / sqrt(2* pi*t2)
with 's' being the standard deviation in the x direction and 't' being the standard deviation in the y direction, as specified by ‘stdDeviation’.
значення ‘stdDeviation’ can be either one or two numbers. Якщо two numbers are provided, the first number represents a standard deviation value along the x-axis of the current coordinate system and the second value represents a standard deviation in Y. Якщо one number is provided, then that value is used for both X and Y.
Even if only one value is provided for ‘stdDeviation’, this can be implemented as a separable convolution.
For larger values of 's' (s >= 2.0), an approximation can бути використано: Three successive box-blurs build a piece-wise quadratic convolution kernel, which approximates the Gaussian kernel to within roughly 3%.
let d = floor(s * 3*sqrt(2*pi)/4 + 0.5)
... if d is odd, use three box-blurs of size 'd', centered on the output pixel.
... if d is even, two box-blurs of size 'd' (the first one centered on the pixel boundary between the output pixel and the one to the left, the second one centered on the pixel boundary between the output pixel and the one to the right) and one box blur of size 'd+1' centered on the output pixel.
Note: the approximation formula also applies correspondingly to 't'.
Frequently this operation will take place on alpha-only images, such as that produced by the built-in input, SourceAlpha. implementation may notice this and optimize the single channel case. Якщо the input has infinite extent and is constant (e.g FillPaint where the fill is a solid color), this operation has no effect. Якщо the input has infinite extent and the filter result is the input to an ‘feTile’, the filter is evaluated with periodic boundary conditions.
Визначення атрибутів:
example at the start of this chapter makes use of the ‘feGaussianBlur’ filter primitive to create a drop shadow effect.
This filter primitive refers to a graphic external to this filter element, which is loaded or rendered into an RGBA raster and becomes the result of the filter primitive.
This filter primitive can refer to an external image or can be a reference to another piece of SVG. It produces an image similar to the built-in image source SourceGraphic except that the graphic comes from an external source.
Якщо the ‘xlink:href’ references a stand-alone image resource such as a JPEG, PNG or SVG file, then the image resource is rendered according to the behavior of the ‘image’ element; otherwise, the referenced resource is rendered according to the behavior of the ‘use’ element. In either case, the current user coordinate system depends on the значення attribute ‘primitiveUnits’ on the ‘filter’ element. processing of the ‘preserveAspectRatio’ attribute on the ‘feImage’ element is identical to that of the ‘image’ element.
When the referenced image must be resampled to match the device coordinate system, it is recommended that high quality viewers make use of appropriate interpolation techniques, for example bilinear or bicubic. Depending on the speed of the available interpolents, this choice may be affected by the ‘image-rendering’ property setting.
Визначення атрибутів:
An IRI reference to the image source.
Анімується: так.
Дивіться ‘preserveAspectRatio’.
Якщо атрибут ‘preserveAspectRatio’ не вказано, тоді ефект такий, якщо б було вказано значення xMidYMid meet were specified.
Анімується: так.
Приклад feImage illustrates how images are placed relative to an object. From left to right:
<svg width="600" height="250" viewBox="0 0 600 250"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Приклад feImage - Прикладs of feImage use</title>
<desc>Three examples of using feImage, the first showing the
default rendering, the second showing the image fit
to a box and the third showing the image
shifted and clipped.</desc>
<defs>
<filter id="Default">
<feImage xlink:href="smiley.png" />
</filter>
<filter id="Fitted" primitiveUnits="objectBoundingBox">
<feImage xlink:href="smiley.png"
x="0" y="0" width="100%" height="100%"
preserveAspectRatio="none"/>
</filter>
<filter id="Shifted">
<feImage xlink:href="smiley.png"
x="500" y="5"/>
</filter>
</defs>
<rect fill="none" stroke="blue"
x="1" y="1" width="598" height="248"/>
<g>
<rect x="50" y="25" width="100" height="200" filter="url(#Default)"/>
<rect x="50" y="25" width="100" height="200" fill="none" stroke="green"/>
<rect x="250" y="25" width="100" height="200" filter="url(#Fitted)"/>
<rect x="250" y="25" width="100" height="200" fill="none" stroke="green"/>
<rect x="450" y="25" width="100" height="200" filter="url(#Shifted)"/>
<rect x="450" y="25" width="100" height="200" fill="none" stroke="green"/>
</g>
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
This filter primitive composites input image layers on top of each other using the over operator with Input1 (corresponding to the first ‘feMergeNode’ child element) on the bottom and the last specified input, InputN (corresponding to the last ‘feMergeNode’ child element), on top.
Many effects produce a number of intermediate layers in order to create the final output image. This filter allows us to collapse those into a single image. Although this could be done by using n-1 Composite-filters, it is more convenient to have this common operation available in this form, and offers the implementation some additional flexibility.
Each ‘feMerge’ element can have any number of ‘feMergeNode’ subelements, each of which has an ‘in’ attribute.
canonical implementation of feMerge is to render the entire effect into one RGBA layer, and then render the resulting layer on the output device. In certain cases (in particular if the output device itself is a continuous tone device), and since merging is associative, it might be a sufficient approximation to evaluateефект one layer at a time and render each layer individually onto the output device bottom to top.
Якщо the topmost image input is SourceGraphic and this ‘feMerge’ is the last filter primitive in the filter, the implementation is encouraged to render the layers up to that point, and then render the SourceGraphic directly from its vector description on top.
example at the start of this chapter makes use of the ‘feMerge’ filter primitive to composite two intermediate filter results together.
This filter primitive performs "fattening" or "thinning" of artwork. It is particularly useful for fattening or thinning an alpha channel.
dilation (or erosion) kernel is a rectangle with a width of 2*x-radius and a height of 2*y-radius. In dilation, the output pixel is the individual component-wise maximum of the corresponding R,G,B,A values in the input image's kernel rectangle. In erosion, the output pixel is the individual component-wise minimum of the corresponding R,G,B,A values in the input image's kernel rectangle.
Frequently this operation will take place on alpha-only images, such as that produced by the built-in input, SourceAlpha. In that case, the implementation might want to optimize the single channel case.
Якщо the input has infinite extent and is constant (e.g FillPaint where the fill is a solid color), this operation has no effect. Якщо the input has infinite extent and the filter result is the input to an ‘feTile’, the filter is evaluated with periodic boundary conditions.
Because ‘feMorphology’ operates on premultipied color values, it will always result in color values less than or equal to the alpha channel.
Визначення атрибутів:
Приклад feMorphology shows examples of the four types of feMorphology operations.
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="7cm" viewBox="0 0 700 500"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Приклад feMorphology - Прикладs of erode and dilate</title>
<desc>Five text strings drawn as outlines.
first is unfiltered. second and third use 'erode'.
fourth and fifth use 'dilate'.</desc>
<defs>
<filter id="Erode3">
<feMorphology operator="erode" in="SourceGraphic" radius="3" />
</filter>
<filter id="Erode6">
<feMorphology operator="erode" in="SourceGraphic" radius="6" />
</filter>
<filter id="Dilate3">
<feMorphology operator="dilate" in="SourceGraphic" radius="3" />
</filter>
<filter id="Dilate6">
<feMorphology operator="dilate" in="SourceGraphic" radius="6" />
</filter>
</defs>
<rect fill="none" stroke="blue" stroke-width="2"
x="1" y="1" width="698" height="498"/>
<g enable-background="new" >
<g font-family="Verdana" font-size="75"
fill="none" stroke="black" stroke-width="6" >
<text x="50" y="90">Unfiltered</text>
<text x="50" y="180" filter="url(#Erode3)" >Erode radius 3</text>
<text x="50" y="270" filter="url(#Erode6)" >Erode radius 6</text>
<text x="50" y="360" filter="url(#Dilate3)" >Dilate radius 3</text>
<text x="50" y="450" filter="url(#Dilate6)" >Dilate radius 6</text>
</g>
</g>
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
This filter primitive offsets the input image relative to its current position in the image space by the specified vector.
This is important for effects like drop shadows.
When applying this filter, the destination location may be offset by a fraction of a pixel in device space. In this case a high quality viewer should make use of appropriate interpolation techniques, for example bilinear or bicubic. This is especially recommended for dynamic viewers where this interpolation provides visually smoother movement of images. For static viewers this is less of a concern. Close attention should be made to the ‘image-rendering’ property setting to determine the authors intent.
Визначення атрибутів:
example at the start of this chapter makes use of the ‘feOffset’ filter primitive to offset the drop shadow from the original source graphic.
This filter primitive lights a source graphic using the alpha channel as a bump map. resulting image is an RGBA image based on the light color. lighting calculation follows the standard specular component of the Phong lighting model. resulting image depends on the light color, light position and surface geometry of the input bump map. result of the lighting calculation is added. filter primitive assumes that the viewer is at infinity in the z direction (тобто, the unit vector in the eye direction is (0,0,1) everywhere).
This filter primitive produces an image which contains the specular reflection part of the lighting calculation. Such a map is intended to be combined with a texture using the add term of the arithmetic ‘feComposite’ method. Multiple light sources can be simulated by adding several of these light maps before applying it to the texture image.
resulting RGBA image is computed as follows:
Sr = ks * pow(N.H,
specularExponent) * Lr
Sg = ks * pow(N.H, specularExponent) * Lg
Sb = ks * pow(N.H, specularExponent) * Lb
Sa = max(Sr, Sg, Sb)
where
Дивіться ‘feDiffuseLighting’ for definition of N and (Lr, Lg, Lb).
definition of H reflects our assumption of the constant eye vector E = (0,0,1):
H = (L + E) / Norm(L+E)
where L is the light unit vector.
Unlike the ‘feDiffuseLighting’, the ‘feSpecularLighting’ filter produces a non-opaque image. This is due to the fact that the specular result (Sr,Sg,Sb,Sa) is meant to be added to the textured image. alpha channel of the result is the max of the color components, so that where the specular light is zero, no additional coverage is added to the image and a fully white highlight will add opacity.
‘feDiffuseLighting’ and ‘feSpecularLighting’ filters will often be applied together. An implementation may detect this and calculate both maps in one pass, instead of two.
Визначення атрибутів:
dx
and dy, respectively, in the surface
normal calculation formulas. By specifying value(s) for ‘kernelUnitLength’, the kernel
becomes defined in a scalable, abstract coordinate system. Якщо ‘kernelUnitLength’ is not
specified, the dx and dy values should
represent very small deltas relative to a given (x,y)
position, which might be implemented in some cases as one pixel in
the intermediate image offscreen bitmap, which is a pixel-based
coordinate system, and thus potentially not scalable. For some level
of consistency across display media and користувацькі агенти, it is
necessary that a value be provided for at least one of ‘filterRes’ and ‘kernelUnitLength’. Discussion of
intermediate images are in the Introduction
and in the description of attribute ‘filterRes’.light source is defined by one of the child elements ‘feDistantLight’, ‘fePointLight’ or ‘feDistantLight’. light color is specified by property ‘lighting-color’.
example at the start of this chapter makes use of the ‘feSpecularLighting’ filter primitive to achieve a highly reflective, 3D glowing effect.
This filter primitive fills a target rectangle with a repeated, tiled pattern of an input image. target rectangle is as large as the filter primitive subregion established by the ‘x’, ‘y’, ‘width’ and ‘height’ attributes on the ‘feTile’ element.
Typically, the input image has been defined with its own filter
primitive subregion in order to define a reference tile. ‘feTile’ replicates the reference
tile in both X and Y to completely fill the target rectangle. top/left
corner of each given tile is at location (x+i*width,y+j*height),
where (x,y) represents the top/left of the input image's
filter primitive subregion, width and height
represent the width and height of the input image's filter primitive
subregion, and i and j can be any integer
value. In most cases, the input image will have a smaller filter primitive subregion than the ‘feTile’
in order to achieve a repeated pattern effect.
Implementers must take appropriate measures in constructing the tiled image to avoid artifacts between tiles, particularly in situations where the user to device transform includes shear and/or rotation. Unless care is taken, interpolation can lead to edge pixels in the tile having opacity values lower or higher than expected due to the interaction of painting adjacent tiles which each have partial overlap with particular pixels.
This filter primitive creates an image using the Perlin turbulence function. It allows the synthesis of artificial textures like clouds or marble. For a detailed description the of the Perlin turbulence function, see "Texturing and Modeling", Ebert et al, AP Professional, 1994. resulting image will fill the entire filter primitive subregion for this filter primitive.
It is possible to create bandwidth-limited noise by synthesizing only one octave.
C code below shows the exact algorithm used for this filter effect.
For fractalSum, you get a turbFunctionResult that is aimed at a range
of -1 to 1 (the actual result might exceed this range in some cases). To
convert to a color value, use the formula colorValue =
((turbFunctionResult * 255) + 255) / 2, then clamp to the range
0 to 255.
For turbulence, you get a turbFunctionResult that is aimed at a range
of 0 to 1 (the actual result might exceed this range in some cases). To
convert to a color value, use the formula colorValue =
(turbFunctionResult * 255), then clamp to the range 0 to 255.
following order is used for applying the pseudo random numbers. An initial seed value is computed based on attribute ‘seed’. Then the implementation computes the lattice points for R, then continues getting additional pseudo random numbers relative to the last generated pseudo random number and computes the lattice points for G, and so on for B and A.
generated color and alpha values are in the color space determined by the значення property ‘color-interpolation-filters’:
/* Produces results in the range [1, 2**31 - 2].
Algorithm is: r = (a * r) mod m
where a = 16807 and m = 2**31 - 1 = 2147483647
Дивіться [Park & Miller], CACM vol. 31 ні. 10 p. 1195, Oct. 1988
To test: the algorithm should produce the result 1043618065
as the 10,000th generated number if the original seed is 1.
*/
#define RAND_m 2147483647 /* 2**31 - 1 */
#define RAND_a 16807 /* 7**5; primitive root of m */
#define RAND_q 127773 /* m / a */
#define RAND_r 2836 /* m % a */
long setup_seed(long lSeed)
{
if (lSeed <= 0) lSeed = -(lSeed % (RAND_m - 1)) + 1;
if (lSeed > RAND_m - 1) lSeed = RAND_m - 1;
return lSeed;
}
long random(long lSeed)
{
long result;
result = RAND_a * (lSeed % RAND_q) - RAND_r * (lSeed / RAND_q);
if (result <= 0) result += RAND_m;
return result;
}
#define BSize 0x100
#define BM 0xff
#define PerlinN 0x1000
#define NP 12 /* 2^PerlinN */
#define NM 0xfff
static uLatticeSelector[BSize + BSize + 2];
static double fGradient[4][BSize + BSize + 2][2];
struct StitchInfo
{
int nWidth; // How much to subtract to wrap for stitching.
int nHeight;
int nWrapX; // Minimum value to wrap.
int nWrapY;
};
static void init(long lSeed)
{
double s;
int i, j, k;
lSeed = setup_seed(lSeed);
for(k = 0; k < 4; k++)
{
for(i = 0; i < BSize; i++)
{
uLatticeSelector[i] = i;
for (j = 0; j < 2; j++)
fGradient[k][i][j] = (double)(((lSeed = random(lSeed)) % (BSize + BSize)) - BSize) / BSize;
s = double(sqrt(fGradient[k][i][0] * fGradient[k][i][0] + fGradient[k][i][1] * fGradient[k][i][1]));
fGradient[k][i][0] /= s;
fGradient[k][i][1] /= s;
}
}
while(--i)
{
k = uLatticeSelector[i];
uLatticeSelector[i] = uLatticeSelector[j = (lSeed = random(lSeed)) % BSize];
uLatticeSelector[j] = k;
}
for(i = 0; i < BSize + 2; i++)
{
uLatticeSelector[BSize + i] = uLatticeSelector[i];
for(k = 0; k < 4; k++)
for(j = 0; j < 2; j++)
fGradient[k][BSize + i][j] = fGradient[k][i][j];
}
}
#define s_curve(t) ( t * t * (3. - 2. * t) )
#define lerp(t, a, b) ( a + t * (b - a) )
double noise2(int nColorChannel, double vec[2], StitchInfo *pStitchInfo)
{
int bx0, bx1, by0, by1, b00, b10, b01, b11;
double rx0, rx1, ry0, ry1, *q, sx, sy, a, b, t, u, v;
register i, j;
t = vec[0] + PerlinN;
bx0 = (int)t;
bx1 = bx0+1;
rx0 = t - (int)t;
rx1 = rx0 - 1.0f;
t = vec[1] + PerlinN;
by0 = (int)t;
by1 = by0+1;
ry0 = t - (int)t;
ry1 = ry0 - 1.0f;
// Якщо stitching, adjust lattice points accordingly.
if(pStitchInfo != NULL)
{
if(bx0 >= pStitchInfo->nWrapX)
bx0 -= pStitchInfo->nWidth;
if(bx1 >= pStitchInfo->nWrapX)
bx1 -= pStitchInfo->nWidth;
if(by0 >= pStitchInfo->nWrapY)
by0 -= pStitchInfo->nHeight;
if(by1 >= pStitchInfo->nWrapY)
by1 -= pStitchInfo->nHeight;
}
bx0 &= BM;
bx1 &= BM;
by0 &= BM;
by1 &= BM;
i = uLatticeSelector[bx0];
j = uLatticeSelector[bx1];
b00 = uLatticeSelector[i + by0];
b10 = uLatticeSelector[j + by0];
b01 = uLatticeSelector[i + by1];
b11 = uLatticeSelector[j + by1];
sx = double(s_curve(rx0));
sy = double(s_curve(ry0));
q = fGradient[nColorChannel][b00]; u = rx0 * q[0] + ry0 * q[1];
q = fGradient[nColorChannel][b10]; v = rx1 * q[0] + ry0 * q[1];
a = lerp(sx, u, v);
q = fGradient[nColorChannel][b01]; u = rx0 * q[0] + ry1 * q[1];
q = fGradient[nColorChannel][b11]; v = rx1 * q[0] + ry1 * q[1];
b = lerp(sx, u, v);
return lerp(sy, a, b);
}
double turbulence(int nColorChannel, double *point, double fBaseFreqX, double fBaseFreqY,
int nNumOctaves, bool bFractalSum, bool bDoStitching,
double fTileX, double fTileY, double fTileWidth, double fTileHeight)
{
StitchInfo stitch;
StitchInfo *pStitchInfo = NULL; // Not stitching when NULL.
// Adjust the base frequencies if necessary for stitching.
if(bDoStitching)
{
// When stitching tiled turbulence, the frequencies must be adjusted
// so that the tile borders will be continuous.
if(fBaseFreqX != 0.0)
{
double fLoFreq = double(floor(fTileWidth * fBaseFreqX)) / fTileWidth;
double fHiFreq = double(ceil(fTileWidth * fBaseFreqX)) / fTileWidth;
if(fBaseFreqX / fLoFreq < fHiFreq / fBaseFreqX)
fBaseFreqX = fLoFreq;
else
fBaseFreqX = fHiFreq;
}
if(fBaseFreqY != 0.0)
{
double fLoFreq = double(floor(fTileHeight * fBaseFreqY)) / fTileHeight;
double fHiFreq = double(ceil(fTileHeight * fBaseFreqY)) / fTileHeight;
if(fBaseFreqY / fLoFreq < fHiFreq / fBaseFreqY)
fBaseFreqY = fLoFreq;
else
fBaseFreqY = fHiFreq;
}
// Set up initial stitch values.
pStitchInfo = &stitch;
stitch.nWidth = int(fTileWidth * fBaseFreqX + 0.5f);
stitch.nWrapX = fTileX * fBaseFreqX + PerlinN + stitch.nWidth;
stitch.nHeight = int(fTileHeight * fBaseFreqY + 0.5f);
stitch.nWrapY = fTileY * fBaseFreqY + PerlinN + stitch.nHeight;
}
double fSum = 0.0f;
double vec[2];
vec[0] = point[0] * fBaseFreqX;
vec[1] = point[1] * fBaseFreqY;
double ratio = 1;
for(int nOctave = 0; nOctave < nNumOctaves; nOctave++)
{
if(bFractalSum)
fSum += double(noise2(nColorChannel, vec, pStitchInfo) / ratio);
else
fSum += double(fabs(noise2(nColorChannel, vec, pStitchInfo)) / ratio);
vec[0] *= 2;
vec[1] *= 2;
ratio *= 2;
if(pStitchInfo != NULL)
{
// Update stitch values. Subtracting PerlinN before the multiplication and
// adding it afterward simplifies to subtracting it once.
stitch.nWidth *= 2;
stitch.nWrapX = 2 * stitch.nWrapX - PerlinN;
stitch.nHeight *= 2;
stitch.nWrapY = 2 * stitch.nWrapY - PerlinN;
}
}
return fSum;
}
Визначення атрибутів:
lowFreq=floor(width*frequency)/width
and hiFreq=ceil(width*frequency)/width. Якщо
frequency/lowFreq < hiFreq/frequency then use lowFreq, else use
hiFreq. While generating turbulence values, generate lattice vectors
as normal for Perlin Noise, except for those lattice points that lie
on the right or bottom edges of the active area (the size of the
resulting tile). In those cases, copy the lattice vector from the
opposite edge of the active area.
Якщо атрибут ‘stitchTiles’ не вказано, тоді ефект такий, якщо б було вказано значення noStitch were specified.
Приклад feTurbulence showsефектs of various parameter settings for feTurbulence.
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="450px" height="325px" viewBox="0 0 450 325"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Приклад feTurbulence - Прикладs of feTurbulence operations</title>
<desc>Six rectangular areas showingефектs of
various parameter settings for feTurbulence.</desc>
<g font-family="Verdana" text-anchor="middle" font-size="10" >
<defs>
<filter id="Turb1" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2"/>
</filter>
<filter id="Turb2" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feTurbulence type="turbulence" baseFrequency="0.1" numOctaves="2"/>
</filter>
<filter id="Turb3" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="8"/>
</filter>
<filter id="Turb4" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feTurbulence type="fractalNoise" baseFrequency="0.1" numOctaves="4"/>
</filter>
<filter id="Turb5" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feTurbulence type="fractalNoise" baseFrequency="0.4" numOctaves="4"/>
</filter>
<filter id="Turb6" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feTurbulence type="fractalNoise" baseFrequency="0.1" numOctaves="1"/>
</filter>
</defs>
<rect x="1" y="1" width="448" height="323"
fill="none" stroke="blue" stroke-width="1" />
<rect x="25" y="25" width="100" height="75" filter="url(#Turb1)" />
<text x="75" y="117">type=turbulence</text>
<text x="75" y="129">baseFrequency=0.05</text>
<text x="75" y="141">numOctaves=2</text>
<rect x="175" y="25" width="100" height="75" filter="url(#Turb2)" />
<text x="225" y="117">type=turbulence</text>
<text x="225" y="129">baseFrequency=0.1</text>
<text x="225" y="141">numOctaves=2</text>
<rect x="325" y="25" width="100" height="75" filter="url(#Turb3)" />
<text x="375" y="117">type=turbulence</text>
<text x="375" y="129">baseFrequency=0.05</text>
<text x="375" y="141">numOctaves=8</text>
<rect x="25" y="180" width="100" height="75" filter="url(#Turb4)" />
<text x="75" y="272">type=fractalNoise</text>
<text x="75" y="284">baseFrequency=0.1</text>
<text x="75" y="296">numOctaves=4</text>
<rect x="175" y="180" width="100" height="75" filter="url(#Turb5)" />
<text x="225" y="272">type=fractalNoise</text>
<text x="225" y="284">baseFrequency=0.4</text>
<text x="225" y="296">numOctaves=4</text>
<rect x="325" y="180" width="100" height="75" filter="url(#Turb6)" />
<text x="375" y="272">type=fractalNoise</text>
<text x="375" y="284">baseFrequency=0.1</text>
<text x="375" y="296">numOctaves=1</text>
</g>
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
Інтерфейс SVGFilterElement : SVGElement, SVGURIReference, SVGLangSpace, SVGExternalResourcesRequired, SVGStylable, SVGUnitTypes { readonly attribute SVGAnimatedEnumeration filterUnits; readonly attribute SVGAnimatedEnumeration primitiveUnits; readonly attribute SVGAnimatedLength x; readonly attribute SVGAnimatedLength y; readonly attribute SVGAnimatedLength width; readonly attribute SVGAnimatedLength height; readonly attribute SVGAnimatedInteger filterResX; readonly attribute SVGAnimatedInteger filterResY; void setFilterRes(in unsigned long filterResX, in unsigned long filterResY) raises(DOMException); };
Інтерфейс SVGFilterPrimitiveStandardAttributes : SVGStylable { readonly attribute SVGAnimatedLength x; readonly attribute SVGAnimatedLength y; readonly attribute SVGAnimatedLength width; readonly attribute SVGAnimatedLength height; readonly attribute SVGAnimatedString result; };
Інтерфейс SVGFEBlendElement : SVGElement, SVGFilterPrimitiveStandardAttributes { // Blend Mode Types const unsigned short SVG_FEBLEND_MODE_UNKNOWN = 0; const unsigned short SVG_FEBLEND_MODE_NORMAL = 1; const unsigned short SVG_FEBLEND_MODE_MULTIPLY = 2; const unsigned short SVG_FEBLEND_MODE_SCREEN = 3; const unsigned short SVG_FEBLEND_MODE_DARKEN = 4; const unsigned short SVG_FEBLEND_MODE_LIGHTEN = 5; readonly attribute SVGAnimatedString in1; readonly attribute SVGAnimatedString in2; readonly attribute SVGAnimatedEnumeration mode; };
Інтерфейс SVGFEColorMatrixElement : SVGElement, SVGFilterPrimitiveStandardAttributes { // Color Matrix Types const unsigned short SVG_FECOLORMATRIX_TYPE_UNKNOWN = 0; const unsigned short SVG_FECOLORMATRIX_TYPE_MATRIX = 1; const unsigned short SVG_FECOLORMATRIX_TYPE_SATURATE = 2; const unsigned short SVG_FECOLORMATRIX_TYPE_HUEROTATE = 3; const unsigned short SVG_FECOLORMATRIX_TYPE_LUMINANCETOALPHA = 4; readonly attribute SVGAnimatedString in1; readonly attribute SVGAnimatedEnumeration type; readonly attribute SVGAnimatedNumberList values; };
Інтерфейс SVGFEComponentTransferElement : SVGElement, SVGFilterPrimitiveStandardAttributes { readonly attribute SVGAnimatedString in1; };
Інтерфейс SVGComponentTransferFunctionElement : SVGElement { // Component Transfer Types const unsigned short SVG_FECOMPONENTTRANSFER_TYPE_UNKNOWN = 0; const unsigned short SVG_FECOMPONENTTRANSFER_TYPE_IDENTITY = 1; const unsigned short SVG_FECOMPONENTTRANSFER_TYPE_TABLE = 2; const unsigned short SVG_FECOMPONENTTRANSFER_TYPE_DISCRETE = 3; const unsigned short SVG_FECOMPONENTTRANSFER_TYPE_LINEAR = 4; const unsigned short SVG_FECOMPONENTTRANSFER_TYPE_GAMMA = 5; readonly attribute SVGAnimatedEnumeration type; readonly attribute SVGAnimatedNumberList tableValues; readonly attribute SVGAnimatedNumber slope; readonly attribute SVGAnimatedNumber intercept; readonly attribute SVGAnimatedNumber amplitude; readonly attribute SVGAnimatedNumber exponent; readonly attribute SVGAnimatedNumber offset; };
Інтерфейс SVGFEFuncRElement : SVGComponentTransferFunctionElement { };
Інтерфейс SVGFEFuncGElement : SVGComponentTransferFunctionElement { };
Інтерфейс SVGFEFuncBElement : SVGComponentTransferFunctionElement { };
Інтерфейс SVGFEFuncAElement : SVGComponentTransferFunctionElement { };
Інтерфейс SVGFECompositeElement : SVGElement, SVGFilterPrimitiveStandardAttributes { // Composite Operators const unsigned short SVG_FECOMPOSITE_OPERATOR_UNKNOWN = 0; const unsigned short SVG_FECOMPOSITE_OPERATOR_OVER = 1; const unsigned short SVG_FECOMPOSITE_OPERATOR_IN = 2; const unsigned short SVG_FECOMPOSITE_OPERATOR_OUT = 3; const unsigned short SVG_FECOMPOSITE_OPERATOR_ATOP = 4; const unsigned short SVG_FECOMPOSITE_OPERATOR_XOR = 5; const unsigned short SVG_FECOMPOSITE_OPERATOR_ARITHMETIC = 6; readonly attribute SVGAnimatedString in1; readonly attribute SVGAnimatedString in2; readonly attribute SVGAnimatedEnumeration operator; readonly attribute SVGAnimatedNumber k1; readonly attribute SVGAnimatedNumber k2; readonly attribute SVGAnimatedNumber k3; readonly attribute SVGAnimatedNumber k4; };
Інтерфейс SVGFEConvolveMatrixElement : SVGElement, SVGFilterPrimitiveStandardAttributes { // Edge Mode Values const unsigned short SVG_EDGEMODE_UNKNOWN = 0; const unsigned short SVG_EDGEMODE_DUPLICATE = 1; const unsigned short SVG_EDGEMODE_WRAP = 2; const unsigned short SVG_EDGEMODE_NONE = 3; readonly attribute SVGAnimatedString in1; readonly attribute SVGAnimatedInteger orderX; readonly attribute SVGAnimatedInteger orderY; readonly attribute SVGAnimatedNumberList kernelMatrix; readonly attribute SVGAnimatedNumber divisor; readonly attribute SVGAnimatedNumber bias; readonly attribute SVGAnimatedInteger targetX; readonly attribute SVGAnimatedInteger targetY; readonly attribute SVGAnimatedEnumeration edgeMode; readonly attribute SVGAnimatedNumber kernelUnitLengthX; readonly attribute SVGAnimatedNumber kernelUnitLengthY; readonly attribute SVGAnimatedBoolean preserveAlpha; };
Інтерфейс SVGFEDiffuseLightingElement : SVGElement, SVGFilterPrimitiveStandardAttributes { readonly attribute SVGAnimatedString in1; readonly attribute SVGAnimatedNumber surfaceScale; readonly attribute SVGAnimatedNumber diffuseConstant; readonly attribute SVGAnimatedNumber kernelUnitLengthX; readonly attribute SVGAnimatedNumber kernelUnitLengthY; };
Інтерфейс SVGFEDistantLightElement : SVGElement { readonly attribute SVGAnimatedNumber azimuth; readonly attribute SVGAnimatedNumber elevation; };
Інтерфейс SVGFEPointLightElement : SVGElement { readonly attribute SVGAnimatedNumber x; readonly attribute SVGAnimatedNumber y; readonly attribute SVGAnimatedNumber z; };
Інтерфейс SVGFESpotLightElement : SVGElement { readonly attribute SVGAnimatedNumber x; readonly attribute SVGAnimatedNumber y; readonly attribute SVGAnimatedNumber z; readonly attribute SVGAnimatedNumber pointsAtX; readonly attribute SVGAnimatedNumber pointsAtY; readonly attribute SVGAnimatedNumber pointsAtZ; readonly attribute SVGAnimatedNumber specularExponent; readonly attribute SVGAnimatedNumber limitingConeAngle; };
Інтерфейс SVGFEDisplacementMapElement : SVGElement, SVGFilterPrimitiveStandardAttributes { // Channel Selectors const unsigned short SVG_CHANNEL_UNKNOWN = 0; const unsigned short SVG_CHANNEL_R = 1; const unsigned short SVG_CHANNEL_G = 2; const unsigned short SVG_CHANNEL_B = 3; const unsigned short SVG_CHANNEL_A = 4; readonly attribute SVGAnimatedString in1; readonly attribute SVGAnimatedString in2; readonly attribute SVGAnimatedNumber scale; readonly attribute SVGAnimatedEnumeration xChannelSelector; readonly attribute SVGAnimatedEnumeration yChannelSelector; };
Інтерфейс SVGFEFloodElement : SVGElement, SVGFilterPrimitiveStandardAttributes { };
Інтерфейс SVGFEGaussianBlurElement : SVGElement, SVGFilterPrimitiveStandardAttributes { readonly attribute SVGAnimatedString in1; readonly attribute SVGAnimatedNumber stdDeviationX; readonly attribute SVGAnimatedNumber stdDeviationY; void setStdDeviation(in float stdDeviationX, in float stdDeviationY) raises(DOMException); };
Інтерфейс SVGFEImageElement : SVGElement, SVGURIReference, SVGLangSpace, SVGExternalResourcesRequired, SVGFilterPrimitiveStandardAttributes { readonly attribute SVGAnimatedPreserveAspectRatio preserveAspectRatio; };
Інтерфейс SVGFEMergeElement : SVGElement, SVGFilterPrimitiveStandardAttributes { };
Інтерфейс SVGFEMergeNodeElement : SVGElement { readonly attribute SVGAnimatedString in1; };
Інтерфейс SVGFEMorphologyElement : SVGElement, SVGFilterPrimitiveStandardAttributes { // Morphology Operators const unsigned short SVG_MORPHOLOGY_OPERATOR_UNKNOWN = 0; const unsigned short SVG_MORPHOLOGY_OPERATOR_ERODE = 1; const unsigned short SVG_MORPHOLOGY_OPERATOR_DILATE = 2; readonly attribute SVGAnimatedString in1; readonly attribute SVGAnimatedEnumeration operator; readonly attribute SVGAnimatedNumber radiusX; readonly attribute SVGAnimatedNumber radiusY; };
Інтерфейс SVGFEOffsetElement : SVGElement, SVGFilterPrimitiveStandardAttributes { readonly attribute SVGAnimatedString in1; readonly attribute SVGAnimatedNumber dx; readonly attribute SVGAnimatedNumber dy; };
Інтерфейс SVGFESpecularLightingElement : SVGElement, SVGFilterPrimitiveStandardAttributes { readonly attribute SVGAnimatedString in1; readonly attribute SVGAnimatedNumber surfaceScale; readonly attribute SVGAnimatedNumber specularConstant; readonly attribute SVGAnimatedNumber specularExponent; readonly attribute SVGAnimatedNumber kernelUnitLengthX; readonly attribute SVGAnimatedNumber kernelUnitLengthY; };
Інтерфейс SVGFETileElement : SVGElement, SVGFilterPrimitiveStandardAttributes { readonly attribute SVGAnimatedString in1; };
Інтерфейс SVGFETurbulenceElement : SVGElement, SVGFilterPrimitiveStandardAttributes { // Turbulence Types const unsigned short SVG_TURBULENCE_TYPE_UNKNOWN = 0; const unsigned short SVG_TURBULENCE_TYPE_FRACTALNOISE = 1; const unsigned short SVG_TURBULENCE_TYPE_TURBULENCE = 2; // Stitch Options const unsigned short SVG_STITCHTYPE_UNKNOWN = 0; const unsigned short SVG_STITCHTYPE_STITCH = 1; const unsigned short SVG_STITCHTYPE_NOSTITCH = 2; readonly attribute SVGAnimatedNumber baseFrequencyX; readonly attribute SVGAnimatedNumber baseFrequencyY; readonly attribute SVGAnimatedInteger numOctaves; readonly attribute SVGAnimatedNumber seed; readonly attribute SVGAnimatedEnumeration stitchTiles; readonly attribute SVGAnimatedEnumeration type; };
SVG content can be interactive (тобто, responsive to user-initiated events) by utilizing the following features in the SVG language:
This chapter описує:
Related information can be found in other chapters:
following aspects of SVG are affected by events:
following table lists all of the events which are recognized and supported in SVG. Event name in the first column is the name to use within SVG's animation elements to define the events which can start or end animations. DOM2 name in the second column is the name to use when defining DOM 2 event listeners ([DOM2EVENTS], section 1.3). Event attribute name in the fourth column contains the corresponding name of the event attributes that can be attached to elements in the SVG language.
Requirements in the table on whether an event of a given type bubbles or is cancelable apply only to events that are created and dispatched by the користувацький агент. Events of those types created from script using the createEvent method on the DocumentEvent interface can be made to bubble or be cancelable with the initEvent method.
| Event name and description | DOM2 name | DOM2 category | Event attribute name |
|---|---|---|---|
|
focusin Occurs when an element receives focus, such as when a ‘text’ becomes selected. |
DOMFocusIn | UIEvent | onfocusin |
|
focusout Occurs when an element loses focus, such as when a ‘text’ becomes unselected. |
DOMFocusOut | UIEvent | onfocusout |
|
activate Occurs when an element is activated, for instance, through a mouse click or a keypress. A numerical argument is provided to give an indication of the type of activation that occurs: 1 for a simple activation (e.g. a simple click or Enter), 2 for hyperactivation (for instance a double click or Shift Enter). |
DOMActivate | UIEvent | onactivate |
|
click Occurs when the pointing device button is clicked over an
element. A click is defined as a mousedown and mouseup over the
same screen location. sequence of these events is: |
(same) | MouseEvent | onclick |
|
mousedown Occurs when the pointing device button is pressed over an element. |
(same) | MouseEvent | onmousedown |
|
mouseup Occurs when the pointing device button is released over an element. |
(same) | MouseEvent | onmouseup |
|
mouseover Occurs when the pointing device is moved onto an element. |
(same) | MouseEvent | onmouseover |
|
mousemove Occurs when the pointing device is moved while it is over an element. |
(same) | MouseEvent | onmousemove |
|
mouseout Occurs when the pointing device is moved away from an element. |
(same) | MouseEvent | onmouseout |
|
DOMSubtreeModified This is a general event for notification of all changes to the document. It can бути використано instead of the more specific events listed below. ( normative definition of this event is the description in the DOM2 specification.) |
(same) | MutationEvent | none |
|
DOMNodeInserted Fired when a node has been added as a child of another node. ( normative definition of this event is the description in the DOM2 specification.) |
(same) | MutationEvent | none |
|
DOMNodeRemoved Fired when a node is being removed from another node. ( normative definition of this event is the description in the DOM2 specification.) |
(same) | MutationEvent | none |
|
DOMNodeRemovedFromDocument Fired when a node is being removed from a document, either through direct removal of the Node or removal of a subtree in which it is contained. ( normative definition of this event is the description in the DOM2 specification.) |
(same) | MutationEvent | none |
|
DOMNodeInsertedIntoDocument Fired when a node is being inserted into a document, either through direct insertion of the Node or insertion of a subtree in which it is contained. ( normative definition of this event is the description in the DOM2 specification.) |
(same) | MutationEvent | none |
|
DOMAttrModified Fired after an attribute has been modified on a node. ( normative definition of this event is the description in the DOM2 specification.) |
(same) | MutationEvent | none |
|
DOMCharacterDataModified Fired after CharacterData within a node has been modified but the node itself has not been inserted or deleted. ( normative definition of this event is the description in the DOM2 specification.) |
(same) | MutationEvent | none |
|
SVGLoad event is triggered at the point at which the користувацький агент has fully parsed the element and its descendants and is ready to act appropriately upon that element, such as being ready to render the element to the target device. Referenced external resources that are required must be loaded, parsed and ready to render before the event is triggered. Optional external resources are not required to be ready for the event to be triggered. SVGLoad events do not bubble and are not cancelable. |
(same) | none | onload |
|
SVGUnload Only applicable to outermost svg elements. unload event occurs when the DOM implementation removes a document from a window or frame. SVGUnload events do not bubble and are not cancelable. |
(same) | none | onunload |
|
SVGAbort abort event occurs when page loading is stopped before an element has been allowed to load completely. SVGAbort events bubble but are not cancelable. |
(same) | none | onabort |
|
SVGError error event occurs when an element does not load properly or when an error occurs during script execution. SVGError events bubble but are not cancelable. |
(same) | none | onerror |
|
SVGResize Occurs when a document view is being resized. This event is only applicable to outermost svg elements and is dispatched after the resize operation has taken place. target of the event is the ‘svg’ element. SVGResize events bubble but are not cancelable. |
(same) | none | onresize |
|
SVGScroll Occurs when a document view is being shifted along the X or Y or both axis, either through a direct user interaction or any change on the currentTranslate property available on SVGElement interface. This event is only applicable to outermost svg elements and is dispatched after the shift modification has taken place. target of the event is the ‘svg’ element. SVGScroll events bubble but are not cancelable. |
(same) | none | onscroll |
|
SVGZoom Occurs when the zoom level of a document view is being changed, either through a direct user interaction or any change to the currentScale property available on SVGElement interface. This event is only applicable to outermost svg elements and is dispatched after the zoom level modification has taken place. target of the event is the ‘svg’ element. SVGZoom events bubble but are not cancelable. |
none | none | onzoom |
|
beginEvent Occurs when an animation element begins. For details, see the description of Interface TimeEvent in the SMIL Animation specification. |
none | none | onbegin |
|
endEvent Occurs when an animation element ends. For details, see the description of Interface TimeEvent in the SMIL Animation specification. |
none | none | onend |
|
repeatEvent Occurs when an animation element repeats. It is raised each time the element repeats, after the first iteration. For details, see the description of Interface TimeEvent in the SMIL Animation specification. |
none | none | onrepeat |
As in DOM 2 Key events ([DOM2EVENTS], section 1.6.3), the SVG specification does not provide a key event set. An event set designed for use with keyboard input devices will be included in a later version of the DOM and SVG specifications.
Details on the parameters passed to event listeners for the event types from DOM2 can be found in the DOM2 specification. For other event types, the parameters passed to event listeners are described elsewhere in this specification.
Event listener attributes can be specified on some elements to listen to a given event. script in such attributes is run only in response to "bubbling" and "at target" phase events dispatched to the element.
Likewise, event-value timing specifiers used in animation element ‘begin’ and ‘end’ attributes are resolved to concrete times only in response to "bubbling" and "at target" phase events dispatched to the relevant element.
On користувацькі агенти which support interactivity, it is common for authors to define SVG documents such that they are responsive to user interface events. Among the set of possible user events are pointer events, keyboard events, and document events.
In response to user interface (UI) events, the author might start an animation, perform a hyperlink to another Web page, highlight part of the document (тобто, change the color of the графічний елементи which are under the pointer), initiate a "roll-over" (тобто, cause some previously hidden графічний елементи to appear near the pointer) or launch a script which communicates with a remote database.
User interface events that occur because of user actions performed on a pointer device are called pointer events.
Many systems support pointer devices such as a mouse or trackball. On systems which use a mouse, pointer events consist of actions such as mouse movements and mouse clicks. On systems with a different pointer device, the pointing device often emulates the behavior of the mouse by providing a mechanism for equivalent user actions, such as a button to press which is equivalent to a mouse click.
For each pointer event, the SVG користувацький агент determines the target element of a given pointer event. target element is the topmost графічний елемент whose relevant graphical content is under the pointer at the time of the event. ( Дивіться property ‘pointer-events’ for a description of how to determine whether an element's relevant graphical content is under the pointer, and thus in which circumstances that graphic element can be the target element for a pointer event.) When an element is not displayed (тобто, when the ‘display’ property on that element or one of its ancestors has a значення none), that element cannot be the ціллю для подій вказівника.
Якщо a target element for the pointer event exists, then the event is dispatched to that element according to the normal event flow ([DOM2EVENTS], section 1.2). Note, however, that if the target element is in a ‘use’ element shadow tree, that the event flow will include SVGElementInstance objects. Дивіться ‘use’ element for details.
Якщо a target element for the pointer event does not exist, then the event is ignored.
There are two distinct aspects of pointer-device interaction with an element or area:
Determining whether a pointer event results in a positive hit-test depends upon the position of the pointer, the size and shape of the графічний елемент, and the computed значення the ‘pointer-events’ property on the element. definition of the ‘pointer-events’ property below описує the exact region that is sensitive to pointer events for a given type of графічний елемент.
Note that the ‘svg’ element is not a графічний елемент, and in a Conforming SVG Stand-Alone File a rootmost ‘svg’ element will never be the ціллю для подій вказівника, though events can bubble to this element. Якщо a pointer event does not result in a positive hit-test on a графічний елемент, then it should evoke any user-agent-specific window behavior, such as a presenting a context menu or controls to allow zooming and panning of an фрагменту документу SVG.
This specification does not define the behavior of pointer events on the rootmost ‘svg’ element for SVG images which are embedded by reference or inclusion within another document, e.g., whether the rootmost ‘svg’ element embedded in an HTML document intercepts mouse click events; future specifications may define this behavior, but for the purpose of this specification, the behavior is implementation-specific.
An element which is the target of a user interface event may have particular interaction behaviors, depending upon the type of element and whether it has explicit associated interactions, such as scripted event listeners, CSS pseudo-classes matches, or declarative animations with event-based timing. algorithm and order for processing user interface events for a given target element, after dispatching the DOM event, is as follows:
preventDefault()
DOM method, then no further processing for this element is performed,
and the event follows the event
flow processing as described in DOM
Level 2 Events [DOM2EVENTS]
(or its successor);:hover, :active, or :focus
as described in [CSS2], section 5.11,
then the relevant class properties are applied;In different circumstances, authors may want to control under what conditions particular graphic elements can become the ціллю для подій вказівника. For example, the author might want a given element to receive pointer events only when the pointer is over the stroked perimeter of a given shape. In other cases, the author might want a given element to ignore pointer events under all circumstances so that graphical elements underneath the given element will become the ціллю для подій вказівника.
effects of masking and clipping differ with respect to pointer-events. A clip path is a geometric boundary, and a given point is clearly either inside or outside that boundary; таким чином, pointer events must be captured normally over the rendered areas of a clipped element, but must not be captured over the clipped areas, as described in the definition of clipping paths. By contrast, a mask is not a binary transition, but a pixel operation, and different behavior for fully transparent and almost-but-not-fully-transparent may be confusingly arbitrary; as a consequence, for elements with a mask applied, pointer-events must still be captured even in areas where the mask goes to zero opacity. Якщо an author wishes to achieve an effect where the transparent parts of a mask allow pointer-events to pass to an element below, a combination of masking and clipping may бути використано.
‘filter’ property has no effect on pointer-events processing, and must in this context be treated as if the ‘filter’ wasn't specified.
For example, suppose a circle with a ‘stroke’ of red (тобто, the outline is solid red) and a ‘fill’ of none (тобто, the interior is not painted) is rendered directly on top of a rectangle with a ‘fill’ of blue. author might want the circle to be the ціллю для подій вказівника only when the pointer is over the perimeter of the circle. When the pointer is over the interior of the circle, the author might want the underlying rectangle to be the target element of pointer events.
‘pointer-events’ property specifies under what circumstances a given графічний елемент can be the target element for a pointer event. It affects the circumstances under which the following are processed:
| Value: | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | none | inherit |
| Initial: | visiblePainted |
| Applies to: | графічний елементи |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Анімується: | yes |
For text elements, hit-testing is performed on a character cell basis:
For raster images, hit-testing is either performed on a whole-image basis (тобто, the rectangular area for the image is one of the determinants for whether the image receives the event) or on a per-pixel basis (тобто, the alpha values for pixels under the pointer help determine whether the image receives the event):
Note that for raster images, the values of properties ‘opacity’, ‘fill-opacity’, ‘stroke-opacity’, ‘fill’ and ‘stroke’ do not affect event processing.
Magnification represents a complete, uniform transformation on an фрагменту документу SVG, where the magnify operation scales all graphical elements by the same amount. A magnify operation hasефект of a supplemental scale and translate transformation placed at the outermost level on the фрагменту документу SVG (тобто, outside the outermost svg element).
Panning represents a translation (тобто, a shift) transformation on an фрагменту документу SVG in response to a user interface action.
SVG користувацькі агенти that operate in interaction-capable user environments are required to support the ability to magnify and pan.
outermost svg element in an фрагменту документу SVG has attribute ‘zoomAndPan’, which takes the possible values of disable and magnify, with the default being magnify.
Якщо disable, the користувацький агент shall disable any magnification and panning controls and not allow the user to magnify or pan on the given фрагмент документу.
Якщо magnify, in environments that support user interactivity, the користувацький агент shall provide controls to allow the user to perform a "magnify" operation on the фрагмент документу.
Якщо a ‘zoomAndPan’ attribute is assigned to an inner ‘svg’ element, the ‘zoomAndPan’ setting on the inner ‘svg’ element will have no effect on the SVG користувацький агент.
Анімується: ні.
Some interactive display environments provide the ability to modify the appearance of the pointer, which is also known as the cursor. Three types of cursors are available:
‘cursor’ property is used to specify which cursor to use. ‘cursor’ property can бути використано to reference standard built-in cursors by specifying a keyword such as crosshair or a custom cursor. Custom cursors are referenced via a <funciri> and can point to either an external resource such as a platform-specific cursor file or to a ‘cursor’ element, which can бути використано to define a platform-independent cursor.
| Value: | [ [<funciri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit |
| Initial: | auto |
| Applies to: | контейнерний елементи and графічний елементи |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual, interactive |
| Анімується: | yes |
This property specifies the type of cursor to be displayed for the pointing device. Values have the following meanings:
P { cursor : url("mything.cur"), url("second.svg#curs"), text; }
‘cursor’ property for SVG is identical to the ‘cursor’ property defined in CSS2 ([CSS2], section 18.1), with the additional requirement that SVG користувацькі агенти must support cursors defined by the SVG ‘cursor’ element. This gives a single, cross-platform, interoperable cursor format, with PNG as the raster component.
‘cursor’ element can бути використано to define a platform-independent custom cursor. A recommended approach for defining a platform-independent custom cursor is to create a PNG image [PNG] and define a ‘cursor’ element that references the PNG image and identifies the exact position within the image which is the pointer position (тобто, the hot spot).
PNG format is recommended because it supports the ability to define a transparency mask via an alpha channel. Якщо a different image format is used, this format should support the definition of a transparency mask (two options: provide an explicit alpha channel or use a particular pixel color to indicate transparency). Якщо the transparency mask can be determined, the mask defines the shape of the cursor; otherwise, the cursor is an opaque rectangle. Typically, the other pixel information (тобто, the R, G and B channels) defines the colors for those parts of the cursor which are not masked out. Note that cursors usually contain at least two colors so that the cursor can be visible over most backgrounds.
Визначення атрибутів:
SVG користувацькі агенти are required to support PNG format images as targets of the ‘xlink:href’ attribute.
Інтерфейс SVGCursorElement : SVGElement, SVGURIReference, SVGTests, SVGExternalResourcesRequired { readonly attribute SVGAnimatedLength x; readonly attribute SVGAnimatedLength y; };
On the Internet, resources are identified using IRIs (Internationalized Resource Identifiers). For example, an SVG file called someDrawing.svg located at http://example.com might have the following IRI:
http://example.com/someDrawing.svg
An IRI can also address a particular element within an XML document by including an IRI fragment identifier as part of the IRI. An IRI which includes an IRI fragment identifier consists of an optional base IRI, followed by a "#" character, followed by the IRI fragment identifier. For example, the following IRI can бути використано to specify the element whose ID is "Lamppost" within file someDrawing.svg:
http://example.com/someDrawing.svg#Lamppost
Internationalized Resource Identifiers (IRIs) are a more generalized complement to Uniform Resource Identifiers (URIs). An IRI is a sequence of characters from the Universal Character Set [UNICODE]. A URI is constructed from a much more restricted set of characters. All URIs are already conformant IRIs. A mapping from IRIs to URIs is defined by the IRI specification, which means that IRIs can бути використано instead of URIs in XML documents, to identify resources. IRIs can be converted to URIs for resolution on a network, if the protocol does not support IRIs directly.
Previous versions of SVG, following XLink, defined an IRI reference type as a URI or as a sequence of characters which must result in an IRI after a particular escaping procedure was applied. escaping procedure was repeated in the XLink 1.0 specification [XLINK], and in the W3C XML Schema Part 2: Datatypes specification [SCHEMA2]. This copying introduced the possibility of error and divergence, but was done because the IRI specification was not yet standardized.
In this specification, the correct term IRI is used for this "URI or sequence of characters plus an algorithm" and the escaping method, which turns IRIs into URIs, is defined by reference to the IRI specification [RFC3987], which has since become an IETF Proposed Standard. Other W3C specifications are expected to be revised over time to remove these duplicate descriptions of the escaping procedure and to refer to IRI directly.
IRIs are used in the ‘xlink:href’ attribute. Some attributes allow both IRIs and text strings as content. To disambiguate a text string from a relative IRI, the functional notation <FuncIRI> is used. This is simply an IRI delimited with a functional notation. Note: For historical reasons, the delimiters are "url(" and ")", for compatibility with the CSS specifications. FuncIRI form is used in елементи презентації .
SVG makes extensive use of IRI references, both absolute and relative, to other objects. For example, to fill a rectangle with a linear gradient, you first define a ‘linearGradient’ element and give it an ID, as in:
<linearGradient xml:id="MyGradient">...</linearGradient>
You then reference the linear gradient as the значення the ‘fill’ property for the rectangle, as in the following example:
<rect fill="url(#MyGradient)"/>
SVG supports two types of IRI references:
following rules apply to the processing of IRI references:
following list описує the elements and properties that allow IRI references and the valid target types for those references:
following rules apply to the processing of invalid IRI references:
IRI references are normally specified with an ‘href’ attribute in the XLink [XLink] namespace. For example, if the prefix of 'xlink' is used for attributes in the XLink namespace, then the attribute is be specified as ‘xlink:href’. значення this attribute forms a reference for the desired resource (or secondary resource, if there is a fragment identifier).
значення the ‘href’ attribute must be an Internationalized Resource Identifier.
Якщо the protocol, such as HTTP, does not support IRIs directly, the IRI is converted to a URI by the SVG implementation, as described in section 3.1 of the IRI specification [RFC3987.
Because it is impractical for any application to check that a value is an IRI reference, this specification follows the lead of the IRI Specification in this matter and imposes no such conformance testing requirement on SVG applications.
Якщо the IRI reference is relative, its absolute version must be computed by the method described in XML Base before use [XML-BASE].
Identifies the type of XLink being used. In SVG 1.1, only simple links are available. Links are simple links by default, so the attribute xlink:type="simple" is optional and may be omitted on simple links. Refer to the XML Linking Language (XLink) [XLINK].
Анімується: ні.
An optional IRI reference that identifies some resource that описує the intended property. value must be an IRI reference as defined in [RFC3987], except that if the IRI scheme used is allowed to have absolute and relative forms, the IRI portion must be absolute. When no value is supplied, no particular role value shall be inferred. Refer to the XML Linking Language (XLink) [XLINK].
Анімується: ні.
An optional IRI reference that identifies some resource that описує the intended property. value must be an IRI reference as defined in [RFC3987], except that if the IRI scheme used is allowed to have absolute and relative forms, the IRI portion must be absolute. When no value is supplied, no particular role value shall be inferred. arcrole attribute corresponds to the [RDF-PRIMER] notion of a property, where the role can be interpreted as stating that "starting-resource HAS arc-role ending-resource." This contextual role can differ from the meaning of an ending resource when taken outside the context of this particular arc. For example, a resource might generically represent a "person," but in the context of a particular arc it might have the role of "mother" and in the context of a different arc it might have the role of "daughter." Refer to the XML Linking Language (XLink) [XLINK].
Анімується: ні.
title attribute shall бути використано to describe the meaning of a link or resource in a human-readable fashion, along the same lines as the role or arcrole attribute. A value is optional; if a value is supplied, it shall contain a string that описує the resource. In general it is preferable to use a ‘title’ child element rather than a ‘title’ attribute. use of this information is highly dependent on the type of processing being done. It may бути використано, for example, to make titles available to applications used by visually impaired users, or to create a table of links, or to present help text that appears when a user lets a mouse pointer hover over a starting resource. Refer to the XML Linking Language (XLink) [XLINK].
Анімується: ні.
This attribute is provided for backwards compatibility with SVG 1.1. It provides documentation to XLink-aware processors. In case of a conflict, the target attribute has priority, since it can express a wider range of values. Refer to the XML Linking Language (XLink) [XLINK].
Анімується: ні.
This attribute is provided for backwards compatibility with SVG 1.1. It provides documentation to XLink-aware processors. Refer to the XML Linking Language (XLink) [XLINK].
Анімується: ні.
In all cases, for compliance with either the "Namespaces in XML 1.0" or the "Namespaces in XML 1.1" Recommendation [XML-NS10][XML-NS], an explicit XLink namespace declaration must be provided whenever one of the above XLink attributes is used within SVG content. One simple way to provide such an XLink namespace declaration is to include an ‘xmlns’ attribute for the XLink namespace on the ‘svg’ element for content that uses XLink attributes. For example:
<svg xmlns:xlink="http://www.w3.org/1999/xlink" ...> <image xlink:href="foo.png" .../> </svg>
SVG provides an ‘a’ element, to indicate links (also known as hyperlinks or Web links). ‘a’ element may contain any element that its parent may contain, except itself.
SVG uses XLink ([XLink]) for all link definitions. SVG 1.1 only requires that користувацькі агенти support XLink's notion of simple links. Each simple link associates exactly two resources, one local and one remote, with an arc going from the former to the latter.
A simple link is defined for each separate rendered element contained within the ‘a’ element; таким чином, if the ‘a’ element contains three ‘circle’ elements, a link is created for each circle. For each rendered element within an ‘a’ element, the given rendered element is the local resource (the source anchor for the link).
remote resource (the destination for the link) is defined by a IRI specified by the XLink ‘xlink:href’ attribute on the ‘a’ element. remote resource may be any Web resource (тобто, an image, a video clip, a sound bite, a program, another SVG document, an HTML document, an element within the current document, an element within a different document, etc.). By activating these links (by clicking with the mouse, through keyboard input, voice commands, etc.), users may visit these resources.
Приклад link01 assigns a link to an ellipse.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="3cm" viewBox="0 0 5 3" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Приклад link01 - a link on an ellipse
</desc>
<rect x=".01" y=".01" width="4.98" height="2.98"
fill="none" stroke="blue" stroke-width=".03"/>
<a xlink:href="http://www.w3.org">
<ellipse cx="2.5" cy="1.5" rx="2" ry="1"
fill="red" />
</a>
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
Якщо the above SVG file is viewed by a користувацький агент that supports both SVG and HTML, then clicking on the ellipse will cause the current window or frame to be replaced by the W3C home page.
Визначення атрибутів:
This attribute provides documentation to XLink-aware processors. Якщо target="_blank" then use xlink:show="new" else use 'replace'. In case of a conflict, the target attribute has priority, since it can express a wider range of values. Refer to the XML Linking Language (XLink) [XLINK].
Анімується: ні.
This attribute provides documentation to XLink-aware processors that an application should traverse from the starting resource to the ending resource only on a post-loading event triggered for the purpose of traversal. Refer to the XML Linking Language (XLink) [XLINK].
Анімується: ні.
location of the referenced object, expressed as an IRI reference.
Анімується: так.
This attribute should бути використано when there are multiple possible targets for the ending resource, such as when the parent document is a multi-frame HTML or XHTML document. This attribute specifies the name or portion of the target window, frame, pane, tab, or other relevant presentation context (тобто, an HTML or XHTML frame, iframe, or object element) into which a document is to be opened when the link is activated:
Note: value '_new' is not a legal value for target (use '_blank').
Анімується: так.
Because SVG content often represents a picture or drawing of something, a common need is to link into a particular view of the document, where a view indicates the initial transformations so as to present a closeup of a particular section of the document.
To link into a particular view of документ SVG, the IRI fragment identifier needs to be a correctly formed SVG fragment identifier. An SVG fragment identifier defines the meaning of the "selector" or "fragment identifier" portion of IRIs that locate resources of MIME media type "image/svg+xml".
An SVG fragment identifier can come in two forms:
An SVG fragment identifier is defined as follows:
SVGFragmentIdentifier ::= BareName |
SVGViewSpec
BareName ::= XML_Name
SVGViewSpec ::= 'svgView(' SVGViewAttributes ')'
SVGViewAttributes ::= SVGViewAttribute |
SVGViewAttribute ';' SVGViewAttributes
SVGViewAttribute ::= viewBoxSpec |
preserveAspectRatioSpec |
transformSpec |
zoomAndPanSpec |
viewTargetSpec
viewBoxSpec ::= 'viewBox(' ViewBoxParams ')'
preserveAspectRatioSpec = 'preserveAspectRatio(' AspectParams ')'
transformSpec ::= 'transform(' TransformParams ')'
zoomAndPanSpec ::= 'zoomAndPan(' ZoomAndPanParams ')'
viewTargetSpec ::= 'viewTarget(' ViewTargetParams ')'
where:
Spaces are not allowed in fragment specifications; таким чином, commas are used to separate numeric values within an SVG view specification (тобто, #svgView(viewBox(0,0,200,200))) and semicolons are used to separate attributes (тобто, #svgView(viewBox(0,0,200,200);preserveAspectRatio(none))).
Semicolons used to separate 'SVGViewAttribute' in SVG fragments may be url-escaped (as %3B); this is useful when animating a (semi-colon separated) list of IRIs because otherwise the semicolon would be interpreted as a list separator.
five types of SVGViewAttribute may occur in any order, but each type may only occur at most one time in a correctly formed SVGViewSpec.
When a source document performs a link into документ SVG, for example via an HTML anchor element ([HTML4], section 12.2; i.e., <a href=...> element in HTML) or an XLink specification [XLINK], then the SVG fragment identifier specifies початковий перегляд into the SVG document, as follows:
‘view’ element is defined as follows:
Визначення атрибутів:
It is helpful to users if the target element(s) are highlighted. visual styling of this highlight should be decided by the document author, because the SVG користувацький агент has no way to determine what changes would make the elements more visible.
CSS :target selector ([SELECTORS], section 6.2.2) may бути використано in a stylesheet to provide alternate styling for elements which are the target of links. For example:
<style type="text/css">
#foo:target {filter: url(#glow)}
/* when the element with id foo is linked to, use a glow filter */
.bar :target {stroke: green; fill-opacity: 0.5}
/* when any descendants of elements with class bar are linked
to, make the fill partly transparent and use a green stroke */
:target {stroke: red }
/* for everything else, just use a red stroke */
</style>
Інтерфейс SVGAElement : SVGElement, SVGURIReference, SVGTests, SVGLangSpace, SVGExternalResourcesRequired, SVGStylable, SVGTransformable { readonly attribute SVGAnimatedString target; };
Інтерфейс SVGViewElement : SVGElement, SVGExternalResourcesRequired, SVGFitToViewBox, SVGZoomAndPan { readonly attribute SVGStringList viewTarget; };
‘contentScriptType’ attribute on the ‘svg’ element specifies the default scripting language for the given фрагмент документу.
It is also possible to specify the scripting language for each individual ‘script’ element by specifying a ‘type’ on the ‘script’ element.
A ‘script’ element is equivalent to the ‘script’ element in HTML and thus is the place for scripts (тобто, ECMAScript). Any functions defined within any ‘script’ element have a "global" scope across the entire current document.
Приклад script01
defines a function circle_click which is called by the ‘onclick’
event attribute on the ‘circle’
element. drawing below on the left is the initial image. drawing below
on the right shows the result after clicking on the circle.
Note that this example demonstrates the use of the ‘onclick’ event attribute for explanatory purposes. example presupposes the presence of an input device with the same behavioral characteristics as a mouse, which will not always be the case. To support the widest range of users, the ‘onactivate’ event attribute should бути використано instead of the ‘onclick’ event attribute.
Before attempting to execute the ‘script’ element the resolved media type value for ‘type’ must be inspected. Якщо the SVG користувацький агент does not support the scripting language then the ‘script’ element must not be executed.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="6cm" height="5cm" viewBox="0 0 600 500"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Приклад script01 - invoke an ECMAScript function from an onclick event
</desc>
<!-- ECMAScript to change the radius with each click -->
<script type="application/ecmascript"> <![CDATA[
function circle_click(evt) {
var circle = evt.target;
var currentRadius = circle.getAttribute("r");
if (currentRadius == 100)
circle.setAttribute("r", currentRadius*2);
else
circle.setAttribute("r", currentRadius*0.5);
}
]]> </script>
<!-- Outline the drawing area with a blue line -->
<rect x="1" y="1" width="598" height="498" fill="none" stroke="blue"/>
<!-- Act on each click event -->
<circle onclick="circle_click(evt)" cx="300" cy="225" r="100"
fill="red"/>
<text x="300" y="480"
font-family="Verdana" font-size="35" text-anchor="middle">
Click on circle to change its size
</text>
</svg>
![]() |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
Визначення атрибутів:
Events can cause scripts to execute when either of the following has occurred:
Related sections of the spec:
following event attributes are available on many SVG elements.
complete list of events that are part of the SVG language and SVG DOM and descriptions of those events is provided in Complete list of supported events.
Below is the definition for the ‘onload’ event attribute. It can be specified on all of the animation elements and most of the графічний елементи and контейнерний елементи. ‘onload’ event attribute is classified as both a graphical event attribute and an animation event attribute. ( Дивіться the definition for each element to determine whether it can have a graphical event attribute specified on it.)
Визначення атрибутів:
Below are the definitions for the graphical event attributes. These can be specified on most графічний елементи and контейнерний елементи. ( Дивіться the definition for each element to determine whether it can have a graphical event attribute specified on it.)
Note that ‘onload’, defined above, is also classified as a graphical event attribute.
Визначення атрибутів:
Below are the definitions for the document event attributes. These can be specified only on ‘svg’ elements.
Визначення атрибутів:
Below are the definitions for the animation event attributes. These can be specified on the animation elements.
Note that ‘onload’, defined above, is also classified as an animation event attribute.
Визначення атрибутів:
Інтерфейс SVGScriptElement : SVGElement, SVGURIReference, SVGExternalResourcesRequired { attribute DOMString type setraises(DOMException); };
A DOM consumer can use the hasFeature of the DOMImplementation interface to determine whether the SVG zoom event set has been implemented by a DOM implementation. feature string for this event set is "SVGZoomEvents". This string is also used with the createEvent method.
zoom event handler occurs before the zoom event is processed. remainder of the DOM represents the previous state of the document. document will be updated upon normal return from the event handler.
UI event type for a zoom event is:
Інтерфейс SVGZoomEvent : UIEvent {
readonly attribute SVGRect zoomRectScreen;
readonly attribute float previousScale;
readonly attribute SVGPoint previousTranslate;
readonly attribute float newScale;
readonly attribute SVGPoint newTranslate;
};
specified zoom rectangle in screen units.
SVGRect об’єкт тільки для читання.
translation values from previous zoom operations that were in place before the zoom operation occurred.
SVGPoint об’єкт тільки для читання.
translation values that will be in place after the zoom operation has been processed.
SVGPoint об’єкт тільки для читання.
Because the Web is a dynamic medium, SVG supports the ability to change vector graphics over time. SVG content can be animated in the following ways:
SVG's animation elements were developed in collaboration with the W3C Synchronized Multimedia (SYMM) Working Group, developers of the Synchronized Multimedia Integration Language (SMIL) 3.0 Specification [SMIL].
SYMM Working Group, in collaboration with the SVG Working Group, has authored the SMIL Animation specification [SMILANIM], which represents a general-purpose XML animation feature set. SVG incorporates the animation features defined in the SMIL Animation specification and provides some SVG-specific extensions.
For an introduction to the approach and features available in any language that supports SMIL Animation, see SMIL Animation overview and SMIL Animation animation model ([SMILANIM], sections 2 and 3). For the list of animation features which go beyond SMIL Animation, see SVG extensions to SMIL Animation.
SVG is a host language in terms of SMIL Animation and therefore introduces additional constraints and features as permitted by that specification. Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for SVG's animation elements and attributes is the SMIL Animation specification [SMILANIM].
SVG supports the following four animation elements which are defined in the SMIL Animation specification:
| ‘animate’ | allows scalar attributes and properties to be assigned different values over time |
| ‘set’ | a convenient shorthand for ‘animate’, which is useful for assigning animation values to non-numeric attributes and properties, such as the ‘visibility’ property |
| ‘animateMotion’ | moves an element along a motion path |
| ‘animateColor’ | modifies the color значення particular attributes or properties over time |
Although SVG defines ‘animateColor’, its use is deprecated in favor of simply using the ‘animate’ element to target properties that can take color values.
Additionally, SVG includes the following compatible extensions to SMIL Animation:
| ‘animateTransform’ | modifies one of SVG's transformation attributes over time, such as the ‘transform’ attribute |
| ‘path’ attribute | SVG allows any feature from SVG's path data syntax to be specified in a ‘path’ attribute to the ‘animateMotion’ element (SMIL Animation only allows a subset of SVG's path data syntax within a ‘path’ attribute) |
| ‘mpath’ element | SVG allows an ‘animateMotion’ element to contain a child ‘mpath’ element which references an SVG ‘path’ element as the definition of the motion path |
| ‘keyPoints’ attribute | SVG adds a ‘keyPoints’ attribute to the ‘animateMotion’ to provide precise control of the velocity of motion path animations |
| ‘rotate’ attribute | SVG adds a ‘rotate’ attribute to the ‘animateMotion’ to control whether an об’єкт automatically rotated so that its x-axis points in the same direction (or opposite direction) as the directional tangent vector of the motion path |
For compatibility with other aspects of the language, SVG uses IRI references via an ‘xlink:href’ attribute to identify the elements which are to be targets of the animations, as allowed in SMIL 3.0.
SMIL Animation requires that the host language define the meaning for document begin and the document end. Since an ‘svg’ is sometimes the root of the XML document tree and other times can be a component of a parent XML grammar, the document begin for a given фрагменту документу SVG is defined to be the exact time at which the ‘svg’ element's SVGLoad event is triggered. document end of an фрагменту документу SVG is the point at which the фрагмент документу has been released and is no longer being processed by the користувацький агент. Однак, nested ‘svg’ elements within документ SVG do not constitute фрагмент документуs in this sense, and do not define a separate document begin; all times within the nested SVG fragment are relative to the document time defined for the root ‘svg’ element.
For SVG, the term presentation time indicates the position in the timeline relative to the document begin of a given фрагмент документу.
SVG defines more constrained error processing than is defined in the SMIL Animation specification [SMILANIM]. SMIL Animation defines error processing behavior where the document continues to run in certain error situations, whereas all animations within an фрагменту документу SVG will stop in the event of any error within the document (дивіться Обробка помилок).
Приклад anim01 below demonstrates each of SVG's five animation elements.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="8cm" height="3cm" viewBox="0 0 800 300"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Приклад anim01 - demonstrate animation elements</desc>
<rect x="1" y="1" width="798" height="298"
fill="none" stroke="blue" stroke-width="2" />
<!-- following illustrates the use of the 'animate' element
to animate a rectangles x, y, and width attributes so that
the rectangle grows to ultimately fill the viewport. -->
<rect id="RectElement" x="300" y="100" width="300" height="100"
fill="rgb(255,255,0)" >
<animate attributeName="x" attributeType="XML"
begin="0s" dur="9s" fill="freeze" from="300" to="0" />
<animate attributeName="y" attributeType="XML"
begin="0s" dur="9s" fill="freeze" from="100" to="0" />
<animate attributeName="width" attributeType="XML"
begin="0s" dur="9s" fill="freeze" from="300" to="800" />
<animate attributeName="height" attributeType="XML"
begin="0s" dur="9s" fill="freeze" from="100" to="300" />
</rect>
<!-- Set up a new user coordinate system so that
the text string's origin is at (0,0), allowing
rotation and scale relative to the new origin -->
<g transform="translate(100,100)" >
<!-- following illustrates the use of the 'set', 'animateMotion',
'animate' and 'animateTransform' elements. 'text' element
below starts off hidden (тобто, invisible). At 3 seconds, it:
* becomes visible
* continuously moves diagonally across the viewport
* changes color from blue to dark red
* rotates from -30 to zero degrees
* scales by a factor of three. -->
<text id="TextElement" x="0" y="0"
font-family="Verdana" font-size="35.27" visibility="hidden" >
It's alive!
<set attributeName="visibility" attributeType="CSS" to="visible"
begin="3s" dur="6s" fill="freeze" />
<animateMotion path="M 0 0 L 100 100"
begin="3s" dur="6s" fill="freeze" />
<animate attributeName="fill" attributeType="CSS"
from="rgb(0,0,255)" to="rgb(128,0,0)"
begin="3s" dur="6s" fill="freeze" />
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="-30" to="0"
begin="3s" dur="6s" fill="freeze" />
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1" to="3" additive="sum"
begin="3s" dur="6s" fill="freeze" />
</text>
</g>
</svg>
At
zero seconds |
At
three seconds |
|
At
six seconds |
At
nine seconds |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
sections below describe the various animation attributes and elements.
following attribute is common to all animation elements and identifies the target element for the animation.
Визначення атрибутів:
An IRI reference to the element which is the target of this animation and which therefore will be modified over time.
target element must be part of the current фрагменту документу SVG.
<iri> must point to exactly one target element which is capable of being the target of the given animation. Якщо <iri> points to multiple target elements, if the given target element is not capable of being a target of the given animation, or if the given target element is not part of the current фрагменту документу SVG, then the document is in error (дивіться Обробка помилок).
Якщо the ‘xlink:href’ attribute is not provided, then the target element will be the immediate parent element of the current animation element.
Refer to the descriptions of the individual animation elements for any restrictions on what types of elements can be targets of particular types of animations.
Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation specification. In particular, see SMIL Animation: Specifying the animation target ([SMILANIM], section 3.1).
following attributes are the animation attribute target attributes, which identify the target attribute or property for the given target element whose value changes over time.
Визначення атрибутів:
Задає the name of the target attribute. An XMLNS prefix may бути використано to indicate the XML namespace for the attribute. prefix will be interpreted in the scope of the current (тобто, the referencing) animation element.
Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation specification. In particular, see SMIL Animation: Specifying the animation target ([SMILANIM], section 3.1).
Задає the namespace in which the target attribute and its associated values are defined. attribute value is one of the following (values are case-sensitive):
default value is 'auto'.
Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation specification. In particular, see SMIL Animation: Specifying the animation target ([SMILANIM], section 3.1).
Приклад animns01 below shows a namespace prefix being resolved to a namespace name in the scope of the referencing element, and that namespace name being used (regardless of the prefix which happens to бути використано in the target scope) to identify the attribute being animated.
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Demonstration of the resolution of namespaces for animation</title>
<!-- at the point of definition, the QName a:href resolves to the namespace
name "http://www.w3.org/1999/xlink" and the local name "href" -->
<g xmlns:a="http://www.w3.org/1999/xlink">
<animate attributeName="a:href" xlink:href="#foo" dur="2s" to="two.png" fill="freeze"/>
</g>
<!-- at the point of use, the namespace name "http://www.w3.org/1999/xlink"
happens to be bound to the namespace prefix 'b' while the prefix
'xlink' is bound to a different namespace name -->
<g xmlns:b="http://www.w3.org/1999/xlink" xmlns:xlink="http://example.net/bar">
<image xml:id="foo" b:href="one.png" x="35" y="50" width="410" height="160"/>
</g>
</svg>
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
Paced animations assume a notion of distance between the various animation values defined by the ‘to’, ‘from’, ‘by’ and ‘values’ attributes. Distance is defined only for scalar types (such as <length>), colors and the subset of transformation types that are supported by ‘animateTransform’. In the list of distance functions below, Va and Vb represent the two values the distance between which is being calculated.
Since paced animation is intended to produce an animation with an even pace of change, it does not make sense to define distance functions for all data types. Distance can be usefully defined for types whose values are n-dimensional vectors (including scalars, which are 1-dimensional vectors). For example, a <length> value is a scalar value, and a <color> value is a 3-dimensional vector. Thus attributes of these types can have paced animation applied to them. On the other hand, a <list-of-length> (as used by ‘stroke-dasharray’) is a list of scalars (1-dimensional vectors), and <list-of-points> (as used by the ‘points’ attribute on a ‘polygon’) is a list of 2-dimensional vectors. Therefore, these types do not have a distance function defined and cannot have paced animation applied to them.
distance functions for types that support paced animation are as follows:
distance(Va, Vb) = |Va − Vb|
Прикладs: animating the ‘x’ attribute on a ‘rect’, or the ‘stroke-width’ property on a ‘circle’.
distance(Va, Vb) = sqrt((Va.red − Vb.red)2 + (Va.green − Vb.green)2 + (Va.blue − Vb.blue)2), where:
Each of the color component values is usually in the range [0, 1], where 0 represents none of that color component, and 1 represents the maximum amount of that color component, in the sRGB gamut [SRGB]. Since <color> values may specify colors outside of the sRGB gamut, these component values may lie outside the range [0, 1].
distance(Va, Vb) = sqrt((Va.tx − Vb.tx)2 + (Va.ty − Vb.ty)2), where:
Приклад (for all transform definition types): animating the ‘transform’ attribute on a ‘g’ using ‘animateTransform’.
distance(Va, Vb) = sqrt((Va.sx − Vb.sx)2 + (Va.sy − Vb.sy)2), where:
Note that, as when specifying scale transformations in a <transform-list>, if the y component of the scale is omitted it is implicitly equal to the x component.
distance(Va, Vb) = sqrt((Va.angle − Vb.angle)2), where:
Since the distance function for rotations is not in terms of the rotation center point components, a paced animation that changes the rotation center point may not appear to have a paced movement when the animation is applied.
Distance functions for all other data types are not defined. Якщо calcMode="paced" is used on an animation of an attribute or property whose type is not one of those listed above, the animation effect is undefined. SVG користувацькі агенти may choose to perform the animation as if calcMode="linear", but this is not required. Authors are recommended not to specify paced animation on types not listed above.
following attributes are the animation timing attributes. They are common to all animation elements and control the timing of the animation, including what causes the animation to start and end, whether the animation runs repeatedly, and whether to retain the end state the animation once the animation ends.
In the syntax specifications that follow, optional white space is indicated as "S", defined as follows:
S ::= (#x20 | #x9 | #xD | #xA)*
Визначення атрибутів:
Defines when the element should begin (i.e. become active).
attribute value is a semicolon separated list of values.
begin
or end to identify whether to synchronize with the
beginning or active end of the referenced animation element.begin of the animation will be determined by a "beginElement()" method call or a hyperlink targeted to the element.
animation DOM methods are described in DOM interfaces.
Hyperlink-based timing is described in SMIL Animation: Hyperlinks and timing.
Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation specification. In particular, see SMIL Animation: 'begin' attribute ([SMILANIM], section 3.2.1).
Задає the simple duration.
attribute value can be one of the following:
Якщо the animation does not have a ‘dur’ attribute, the simple duration is indefinite. Note that interpolation will not work if the simple duration is indefinite (although this may still be useful for ‘set’ elements). Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation specification. In particular, see SMIL Animation: 'dur' attribute ([SMILANIM], section 3.2.1).
Defines an end value for the animation that can constrain the active duration. attribute value is a semicolon separated list of values.
A значення 'indefinite' specifies that the end of the animation will be determined by an endElement method call (the animation DOM methods are described in DOM interfaces).
Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation specification. In particular, see SMIL Animation: 'end' attribute ([SMILANIM], section 3.3.2).
Задає the minimum значення the active duration.
attribute value can be either of the following:
Задає the length of the minimum значення the active duration, measured in local time.
Value must be greater than 0.
default value for ‘min’ is '0'. This does not constrain the active duration at all.
Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation specification. In particular, see SMIL Animation: 'min' attribute ([SMILANIM], section 3.3.3).
Задає the maximum значення the active duration.
attribute value can be either of the following:
Задає the length of the maximum значення the active duration, measured in local time.
Value must be greater than 0.
There is no default value for ‘max’. This does not constrain the active duration at all.
Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation specification. In particular, see SMIL Animation: 'max' attribute ([SMILANIM], section 3.3.3).
Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation specification. In particular, see SMIL Animation: 'restart' attribute ([SMILANIM], section 3.3.7).
Задає the number of iterations of the animation function. It can have the following attribute values:
Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation specification. In particular, see SMIL Animation: 'repeatCount' attribute ([SMILANIM], section 3.3.1).
Задає the total duration for repeat. It can have the following attribute values:
f(t).Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation specification. In particular, see SMIL Animation: 'repeatDur' attribute ([SMILANIM], section 3.3.1).
This attribute can have the following values:
animation effect is removed (no longer applied) when the active duration of the animation is over. After the active end of the animation, the animation no longer affects the target (unless the animation is restarted - see SMIL Animation: Restarting animation).
This is the default value.
Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation specification. In particular, see SMIL Animation: 'fill' attribute ([SMILANIM], section 3.3.5).
SMIL Animation specification [SMILANIM] defines the detailed processing rules associated with the above attributes. Except for any SVG-specific rules explicitly mentioned in this specification, the SMIL Animation specification is the normative definition of the processing rules for the above attributes.
Clock values have the same syntax as in SMIL Animation specification [SMILANIM]. grammar for clock values is repeated here:
Clock-val ::= Full-clock-val | Partial-clock-val
| Timecount-val
Full-clock-val ::= Hours ":" Minutes ":" Seconds ("." Fraction)?
Partial-clock-val ::= Minutes ":" Seconds ("." Fraction)?
Timecount-val ::= Timecount ("." Fraction)? (Metric)?
Metric ::= "h" | "min" | "s" | "ms"
Hours ::= DIGIT+; any positive number
Minutes ::= 2DIGIT; range from 00 to 59
Seconds ::= 2DIGIT; range from 00 to 59
Fraction ::= DIGIT+
Timecount ::= DIGIT+
2DIGIT ::= DIGIT DIGIT
DIGIT ::= [0-9]
For Timecount values, the default metric suffix is "s" (for seconds). No embedded white space is allowed in clock values, although leading and trailing white space characters will be ignored.
Clock values describe presentation time.
following are examples of legal clock values:
02:30:03 = 2 hours, 30 minutes and 3 seconds 50:00:10.25 = 50 hours, 10 seconds and 250 milliseconds
02:33 = 2 minutes and 33 seconds 00:10.5 = 10.5 seconds = 10 seconds and 500
milliseconds 3.2h = 3.2 hours = 3 hours and 12 minutes 45min = 45 minutes 30s = 30 seconds 5ms = 5 milliseconds 12.467 = 12 seconds and 467 millisecondsFractional values are just (base 10) floating point definitions of seconds. Thus:
00.5s = 500 milliseconds
00:00.005 = 5 milliseconds
following attributes are the animation value attributes. They are common to elements ‘animate’, ‘animateColor’, ‘animateMotion’ and ‘animateTransform’. These attributes define the values that are assigned to the target attribute or property over time. attributes below provide control over the relative timing of keyframes and the interpolation method between discrete values.
Визначення атрибутів:
Задає the interpolation mode for the animation. This can take any of the following values. default mode is 'linear', however if the attribute does not support linear interpolation (e.g. for strings), the ‘calcMode’ attribute is ignored and discrete interpolation is used.
Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation specification. In particular, see SMIL Animation: 'calcMode' attribute ([SMILANIM], section 3.2.3).
A semicolon-separated list of time values used to control the pacing of the animation. Each time in the list corresponds to a value in the ‘values’ attribute list, and defines when the value is used in the animation function. Each time value in the ‘keyTimes’ list is specified as a floating point value between 0 and 1 (inclusive), representing a proportional offset into the simple duration of the animation element.
For animations specified with a ‘values’ list, the ‘keyTimes’ attribute if specified must have exactly as many values as there are in the ‘values’ attribute. For from/to/by animations, the ‘keyTimes’ attribute if specified must have two values.
Each successive time value must be greater than or equal to the preceding time value.
‘keyTimes’ list semantics depends upon the interpolation mode:
Якщо the interpolation mode is 'paced', the ‘keyTimes’ attribute is ignored.
Якщо there are any errors in the ‘keyTimes’ specification (bad values, too many or too few values), the фрагмент документу is in error (дивіться error processing).
Якщо the simple duration is indefinite, any ‘keyTimes’ specification will be ignored.
Because paced animation interpolation is unspecified for some value types, authors are encouraged to use 'linear' animation interpolation with calculated ‘keyTimes’ to achieve particular interpolation behavior for these types.
Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation specification. In particular, see SMIL Animation: 'keyTimes' attribute ([SMILANIM], section 3.2.3).
A set of Bézier control points associated with the ‘keyTimes’ list, defining a cubic
Bézier function that controls interval pacing. attribute value
is a semicolon-separated list of control point descriptions. Each
control point description is a set of four values: x1 y1 x2
y2, describing the Bézier control points for one time
segment. Note: SMIL
allows these values to be separated either by commas with optional
whitespace, or by whitespace alone. ‘keyTimes’ values that define the
associated segment are the Bézier "anchor points", and the ‘keySplines’ values are the
control points. Thus, there must be one fewer sets of control
points than there are ‘keyTimes’.
values must all be in the range 0 to 1.
This attribute is ignored unless the ‘calcMode’ is set to 'spline'.
Якщо there are any errors in the ‘keySplines’ specification (bad values, too many or too few values), the фрагмент документу is in error (дивіться error processing).
Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation specification. In particular, see SMIL Animation: 'keySplines' attribute ([SMILANIM], section 3.2.3).
SMIL Animation specification [SMILANIM] defines the detailed processing rules associated with the above attributes. Except for any SVG-specific rules explicitly mentioned in this specification, the SMIL Animation specification is the normative definition of the processing rules for the above attributes.
animation values specified in the animation element must be legal values for the specified attribute. Leading and trailing white space, and white space before and after semicolon separators, will be ignored.
All values specified must be legal values for the specified attribute (as defined in the associated namespace). Якщо any values are not legal, the фрагмент документу is in error (дивіться error processing).
Якщо a list of values is used, the animation will apply the values in order over the course of the animation. Якщо a list of ‘values’ is specified, any ‘from’, ‘to’ and ‘by’ attribute values are ignored.
processing rules for the variants of from/by/to animations are described in Animation function values with the following exception.
In order to provide behavior that is intuitive and consistent between discrete animations with an explicitly specified ‘from’ attribute (e.g. "from-to animation") and those where the underlying value is used (e.g. "to animation"), the behavior of discrete to-animation in SVG deviates from the definition in SMIL Animation. As with a discrete from-to animation, a discrete to animation will set the underlying value for the first half of the simple duration (or, if a ‘keyTimes’ list is provided, until the simple duration specified by the second value in the ‘keyTimes’ list) and the ‘to’ value for the remainder of the simple duration.
following figure illustrates the interpretation of the ‘keySplines’ attribute. Each diagram illustratesефект of ‘keySplines’ settings for a single interval (i.e. between the associated pairs of values in the ‘keyTimes’ and ‘values’ lists.). horizontal axis can be thought of as the input value for the unit progress of interpolation within the interval - i.e. the pace with which interpolation proceeds along the given interval. vertical axis is the resulting value for the unit progress, yielded by the function that the ‘keySplines’ attribute defines. Another way of describing this is that the horizontal axis is the input unit time for the interval, and the vertical axis is the output unit time. Дивіться also the section Timing and real-world clock times.
keySplines="0 0 1 1" (the default) |
keySplines=".5 0 .5 1" |
||
keySplines="0 .75 .25 1" |
keySplines="1 0 .25 .25" |
To illustrate the calculations, consider the simple example:
<animate dur="4s" values="10; 20" keyTimes="0; 1"
calcMode="spline" keySplines={as in table} />
Using the ‘keySplines’ values for each of the four cases above, the approximate interpolated values as the animation proceeds are:
| Value of ‘keySplines’ | Initial value | After 1s | After 2s | After 3s | Final value |
|---|---|---|---|---|---|
| 0 0 1 1 | 10.0 | 12.5 | 15.0 | 17.5 | 20.0 |
| .5 0 .5 1 | 10.0 | 11.0 | 15.0 | 19.0 | 20.0 |
| 0 .75 .25 1 | 10.0 | 18.0 | 19.3 | 19.8 | 20.0 |
| 1 0 .25 .25 | 10.0 | 10.1 | 10.6 | 16.9 | 20.0 |
For a formal definition of Bézier spline calculation, see [FOLEY-VANDAM], pp. 488-491.
It is frequently useful to define animation as an offset or delta to an attribute's value, rather than as absolute values. A simple "grow" animation can increase the width of an object by 10 pixels:
<rect width="20px" ...>
<animate attributeName="width" from="0px" to="10px" dur="10s"
additive="sum"/>
</rect>
It is frequently useful for repeated animations to build upon the previous results, accumulating with each interation. following example causes the rectangle to continue to grow with each repeat of the animation:
<rect width="20px" ...>
<animate attributeName="width" from="0px" to="10px" dur="10s"
additive="sum" accumulate="sum" repeatCount="5"/>
</rect>
At the end of the first repetition, the rectangle has a width of 30 pixels. At the end of the second repetition, the rectangle has a width of 40 pixels. At the end of the fifth repetition, the rectangle has a width of 70 pixels.
For more information about additive animations, see SMIL Animation: Additive animation. For more information on cumulative animations, see SMIL Animation: Controlling behavior of repeating animation - Cumulative animation.
following attributes are the animation addition attributes, which are common to elements ‘animate’, ‘animateColor’, ‘animateMotion’ and ‘animateTransform’.
Визначення атрибутів:
Controls whether or not the animation is additive.
Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation specification. In particular, see SMIL Animation: 'additive' attribute ([SMILANIM], section 3.3.6).
Controls whether or not the animation is cumulative.
This attribute is ignored if the target attribute value does not support addition, or if the animation element does not repeat.
Cumulative animation is not defined for "to animation".
This attribute will be ignored if the animation function is specified with only the ‘to’ attribute.
Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation specification. In particular, see SMIL Animation: 'accumulate' attribute ([SMILANIM], section 3.3.1).
SVG allows both attributes and properties to be animated. Якщо a given attribute or property is inheritable by descendants, then animations on a parent element such as a ‘g’ element hasефект of propagating the attribute or property animation values to descendant elements as the animation proceeds; таким чином, descendant elements can inherit animated attributes and properties from their ancestors.
‘animate’ element is used to animate a single attribute or property over time. For example, to make a rectangle repeatedly fade away over 5 seconds, you can specify:
<rect>
<animate attributeType="CSS" attributeName="opacity"
from="1" to="0" dur="5s" repeatCount="indefinite" />
</rect>
Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this element is the SMIL Animation specification. In particular, see SMIL Animation: 'animate' element ([SMILANIM], section 4.1).
‘color-interpolation’ property applies to color interpolations that result from animations using the ‘animate’ element.
For a list of attributes and properties that can be animated using the ‘animate’ element, see Elements, attributes and properties that can be animated.
‘set’ element provides a simple means of just setting the значення an attribute for a specified duration. It supports all attribute types, including those that cannot reasonably be interpolated, such as string and boolean values. ‘set’ element is non-additive. additive and accumulate attributes are not allowed, and will be ignored if specified.
Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this element is the SMIL Animation specification. In particular, see SMIL Animation: 'set' element ([SMILANIM], section 4.2).
Визначення атрибутів:
For a list of attributes and properties that can be animated using the ‘set’ element, see Elements, attributes and properties that can be animated.
‘animateMotion’ element causes a referenced element to move along a motion path.
Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this element is the SMIL Animation specification. In particular, see SMIL Animation: 'animateMotion' element ([SMILANIM], section 4.3).
Визначення атрибутів:
‘keyPoints’ takes a semicolon-separated list of floating point values between 0 and 1 and indicates how far along the motion path the object shall move at the moment in time specified by corresponding ‘keyTimes’ value. Distance calculations use the користувацький агент's distance along the path algorithm. Each progress value in the list corresponds to a value in the ‘keyTimes’ attribute list.
Якщо a list of ‘keyPoints’ is specified, there must be exactly as many values in the ‘keyPoints’ list as in the ‘keyTimes’ list.
Якщо there are any errors in the ‘keyPoints’ specification (bad values, too many or too few values), then the document is in error (дивіться Обробка помилок).
‘rotate’ attribute post-multiplies a supplemental transformation matrix onto the CTM of the target element to apply a rotation transformation about the origin of the current user coordinate system. rotation transformation is applied after the supplemental translation transformation that is computed due to the ‘path’ attribute.
default value is '0'.
Визначення атрибутів:
For ‘animateMotion’, the specified values for ‘from’, ‘by’, ‘to’ and ‘values’ consists of x, y coordinate pairs, with a single comma and/or white space separating the x coordinate from the y coordinate. For example, from="33,15" specifies an x coordinate значення 33 and a y coordinate значення 15.
Якщо provided, the ‘values’ attribute must consists of a list of x, y coordinate pairs. Coordinate values are separated by at least one white space character or a comma. Additional white space around the separator is allowed. For example, values="10,20;30,20;30,40" or values="10mm,20mm;30mm,20mm;30mm,40mm". Each coordinate represents a length. Attributes ‘from’, ‘by’, ‘to’ and ‘values’ specify a shape on the current canvas which represents the motion path.
Two options are available which allow definition of a motion path using any of SVG's path data commands:
Note that SVG's path data commands can only contain values in user space, whereas ‘from’, ‘by’, ‘to’ and ‘values’ can specify coordinates in user space or using unit identifiers. Дивіться Units.
various (x,y) points of the shape provide a supplemental transformation matrix onto the CTM for the referenced object which causes a translation along the x- and y-axes of the current user coordinate system by the (x,y) values of the shape computed over time. Thus, the referenced об’єкт translated over time by the offset of the motion path relative to the origin of the current user coordinate system. supplemental transformation is applied on top of any transformations due to the target element's ‘transform’ attribute or any animations on that attribute due to ‘animateTransform’ elements on the target element.
‘additive’ and ‘accumulate’ attributes apply to ‘animateMotion’ elements. Multiple ‘animateMotion’ elements all simultaneously referencing the same target element can be additive with respect to each other; however, the transformations which result from the ‘animateMotion’ elements are always supplemental to any transformations due to the target element's ‘transform’ attribute or any ‘animateTransform’ elements.
default calculation mode (‘calcMode’) for ‘animateMotion’ is "paced". This will produce constant velocity motion along the specified path. Note that while animateMotion elements can be additive, it is important to observe that the addition of two or more "paced" (constant velocity) animations might not result in a combined motion animation with constant velocity.
When a path is combined with "discrete", "linear" or "spline" ‘calcMode’ settings, and if attribute ‘keyPoints’ is not provided, the number of values is defined to be the number of points defined by the path, unless there are "move to" commands within the path. A "move to" command within the path (i.e. other than at the beginning of the path description) A "move to" command does not count as an additional point when dividing up the duration, or when associating ‘keyTimes’, ‘keySplines’ and ‘keyPoints’ values. When a path is combined with a "paced" ‘calcMode’ setting, all "move to" commands are considered to have 0 length (i.e. they always happen instantaneously), and is not considered in computing the pacing.
For more flexibility in controlling the velocity along the motion path, the ‘keyPoints’ attribute provides the ability to specify the progress along the motion path for each of the ‘keyTimes’ specified values. Якщо specified, ‘keyPoints’ causes ‘keyTimes’ to apply to the values in ‘keyPoints’ rather than the points specified in the ‘values’ attribute array or the points on the ‘path’ attribute.
override rules for ‘animateMotion’ are as follows. Regarding the definition of the motion path, the ‘mpath’ element overrides the the ‘path’ attribute, which overrides ‘values’, which overrides ‘from’, ‘by’ and ‘to’. Regarding determining the points which correspond to the ‘keyTimes’ attributes, the ‘keyPoints’ attribute overrides ‘path’, which overrides ‘values’, which overrides ‘from’, ‘by’ and ‘to’.
At any time t within a motion path animation of duration dur, the computed coordinate (x,y) along the motion path is determined by finding the point (x,y) which is t/dur distance along the motion path using the користувацький агент's distance along the path algorithm.
following example demonstrates the supplemental transformation matrices that are computed during a motion path animation.
Приклад animMotion01 shows a triangle moving along a motion path.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="3cm" viewBox="0 0 500 300"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" >
<desc>Приклад animMotion01 - demonstrate motion animation computations</desc>
<rect x="1" y="1" width="498" height="298"
fill="none" stroke="blue" stroke-width="2" />
<!-- Draw the outline of the motion path in blue, along
with three small circles at the start, middle and end. -->
<path id="path1" d="M100,250 C 100,50 400,50 400,250"
fill="none" stroke="blue" stroke-width="7.06" />
<circle cx="100" cy="250" r="17.64" fill="blue" />
<circle cx="250" cy="100" r="17.64" fill="blue" />
<circle cx="400" cy="250" r="17.64" fill="blue" />
<!-- Here is a triangle which will be moved about the motion path.
It is defined with an upright orientation with the base of
the triangle centered horizontally just above the origin. -->
<path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
fill="yellow" stroke="red" stroke-width="7.06" >
<!-- Define the motion path animation -->
<animateMotion dur="6s" repeatCount="indefinite" rotate="auto" >
<mpath xlink:href="#path1"/>
</animateMotion>
</path>
</svg>
At
zero seconds |
At
three seconds |
At
six seconds |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
following table shows the supplemental transformation matrices that are applied to achieveефект of the motion path animation.
| After 0s | After 3s | After 6s | |
|---|---|---|---|
| Supplemental transform due to movement along motion path | translate(100,250) | translate(250,100) | translate(400,250) |
| Supplemental transform due to rotate="auto" | rotate(-90) | rotate(0) | rotate(90) |
For a list of elements that can be animated using the ‘animateMotion’ element, see Elements, attributes and properties that can be animated.
‘animateColor’ element specifies a color transformation over time.
Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this element is the SMIL Animation specification. In particular, see SMIL Animation: 'animateColor' element ([SMILANIM], section 4.4).
‘from’, ‘by’ and ‘to’ attributes take color values, where each color value is expressed using the following syntax (the same syntax as used in SVG's properties that can take color values):
<color> <icccolor>?
‘values’ attribute for the ‘animateColor’ element consists of a semicolon-separated list of color values, with each color value expressed in the above syntax.
Out of range color values can be provided, but користувацький агент processing will be implementation dependent. користувацькі агенти should clamp color values to allow color range values as late as possible, but note that system differences might preclude consistent behavior across different systems.
‘color-interpolation’ property applies to color interpolations that result from ‘animateColor’ animations.
use of ‘animateColor’ is deprecated, since all of its functionality can be achieved simply by using ‘animate’ to target properties that can take color values. ‘animateColor’ element may be dropped from a future version of the SVG specification.
For a list of attributes and properties that can be animated using the ‘animateColor’ element, see Elements, attributes and properties that can be animated.
‘animateTransform’ element animates a transformation attribute on a target element, thereby allowing animations to control translation, scaling, rotation and/or skewing.
Визначення атрибутів:
‘from’, ‘by’ and ‘to’ attributes take a value expressed using the same syntax that is available for the given transformation type:
( Дивіться ‘transform’ attribute.)
‘values’ attribute for the ‘animateTransform’ element consists of a semicolon-separated list of values, where each individual value is expressed as described above for ‘from’, ‘by’ and ‘to’.
animation effect for ‘animateTransform’ is post-multiplied to the underlying value for additive ‘animateTransform’ animations (дивіться below) instead of added to the underlying value, due to the specific behavior of ‘animateTransform’.
From-to, from-by and by animations are defined in SMIL to be equivalent to a corresponding values animation. Дивіться the Animation function values section of SMIL Animation ([SMILANIM], section 3.2.2). Однак, to animations are a mixture of additive and non-additive behavior, as described in the How from, to and by attributes affect additive behavior section of SMIL Animation ([SMILANIM], section 3.3.6). To animations provide specific functionality to get a smooth change from the underlying value to the ‘to’ attribute value, which conflicts mathematically with the requirement for additive transform animations to be post-multiplied. As a consequence, in SVG 1.1 the behavior of to animations for ‘animateTransform’ is undefined. Authors are suggested to use from-to, from-by, by or values animations to achieve any desired transform animation.
Якщо ‘calcMode’ has the value 'paced', then the "distance" for the transformation is calculated as further described in Paced animations and complex types.
When an animation is active,ефект of non-additive ‘animateTransform’ (тобто, additive="replace") is to replace the given attribute's value with the transformation defined by the ‘animateTransform’. effect of additive (тобто, additive="sum") is to post-multiply the transformation matrix corresponding to the transformation defined by this ‘animateTransform’. To illustrate:
<rect transform="skewX(30)"...>
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="0" to="90" dur="5s"
additive="replace" fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1" to="2" dur="5s"
additive="replace" fill="freeze"/>
</rect>
In the code snippet above, because the both animations have additive="replace", the first animation overrides the transformation on the rectangle itself and the second animation overrides the transformation from the first animation; therefore, at time 5 seconds, the visual result of the above two animations would be equivalent to the following static rectangle:
<rect transform="scale(2)" ... />
whereas in the following example:
<rect transform="skewX(30)"...>
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="0" to="90" dur="5s"
additive="sum" fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1" to="2" dur="5s"
additive="sum" fill="freeze"/>
</rect>
In this code snippet, because the both animations have additive="sum", the first animation post-multiplies its transformation to any transformations on the rectangle itself and the second animation post-multiplies its transformation to any transformation from the first animation; therefore, at time 5 seconds, the visual result of the above two animations would be equivalent to the following static rectangle:
<rect transform="skewX(30) rotate(90) scale(2)" ... />
Note that the zero value used when performing a by animation with type="scale" is indeed 0. Thus, performing the following animation causes the rectangle to be invisible at time 0s (since the animated transform list value is 'scale(0)'), and be scaled back to its original size at time 5s (since the animated transform list value is 'scale(1)'):
<rect width="100" height="100">
<animateTransform attributeName="transform" attributeType="XML"
type="scale" by="1" dur="5s" fill="freeze"/>
</rect>
When a transform animation has accumulate='sum', the accumulation that occurs for each completed repetition of the animation is computed on the values specified in the ‘animateTransform’ element's animation value attributes (тобто, ‘values’, ‘from’, ‘to’ and ‘by’) and not on the transformation matrix that these values represent. For example, in the following code snippet, 3 is added to the scale value at the start of each repetition:
<rect width="100" height="100">
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="2" to="3" repeatCount="3" dur="4s"
fill="freeze"/>
</rect>
following graph and table shows the animated ‘transform’ value on the ‘rect’ over the course of the animation:
![]() |
|
Transform item types that can have multiple values – 'translate', 'scale' and 'rotate' – are treated as vectors and accumulation is performed with vector addition. Optional values that are omitted are taken to have their usual implied value: 1 for the <sy> component of a 'scale' and 0 for the <tx> component of a 'translate' and the <cx cy> components of a 'rotate'.
For example, consider the following code snippet, which has a cumulative transform animation of type 'rotate':
<rect width="100" height="100">
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="0 30 40" to="10 30 40"
repeatCount="2" dur="1s" fill="freeze"/>
</rect>
At time 1 second, the animated значення ‘transform’ on the ‘rect’ will jump from 'rotate(10 30 40)' to 'rotate(10 60 80)', becauseефект of the accumulation is to take the value at the end of the first repetition, '10 30 40', and add to it the value at simple duration t = 0s, which is '0 30 40'.
For a list of attributes and properties that can be animated using the ‘animateTransform’ element, see Elements, attributes and properties that can be animated.
following lists all елементуs which can be animated by an ‘animateMotion’ element:
Each attribute or property within this specification indicates whether or not it can be animated by SVG's animation elements. Animatable attributes and properties are designated as follows:
Анімується: так.
whereas attributes and properties that cannot be animated are designated:
Анімується: ні.
Some properties are defined as being animatable but only for non-additive animations:
Анімується: yes (non-additive).
SVG has a defined set of basic data types for its various supported attributes and properties. For those attributes and properties that can be animated, the following table indicates which animation elements can бути використано to animate each of the basic data types. Якщо a given attribute or property can take values of keywords (which are not additive) or numeric values (which are additive), then additive animations are possible if the subsequent animation uses a numeric value even if the base animation uses a keyword value; however, if the subsequent animation uses a keyword value, additive animation is not possible.
| Data type | Additive? | ‘animate’ | ‘set’ | ‘animateColor’ | ‘animateTransform’ | Notes |
|---|---|---|---|---|---|---|
| <angle> | yes | yes | yes | no | no | |
| <color> | yes | yes | yes | yes | no | Only additive if each value can be converted to an RGB color. |
| <coordinate> | yes | yes | yes | no | no | |
| <frequency> | no | no | no | no | no | |
| <integer> | yes | yes | yes | no | no | |
| <length> | yes | yes | yes | no | no | |
| <list-of-Ts> | no | yes | yes | no | no | |
| <number> | yes | yes | yes | no | no | |
| <paint> | yes | yes | yes | yes | no | Only additive if each value can be converted to an RGB color. |
| <percentage> | yes | yes | yes | no | no | |
| <time> | no | no | no | no | no | |
| <transform-list> | yes | no | no | no | yes | Additive means that a transformation is post-multiplied to the base set of transformations. |
| <iri> | no | yes | yes | no | no | |
| All other data types used in animatable attributes and properties | no | yes | yes | no | no |
Any deviation from the above table or other special note about the animation capabilities of a particular attribute or property is included in the section of the specification where the given attribute or property is defined.
Приклад dom01 shows a simple animation using the DOM.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="4cm" height="2cm" viewBox="0 0 400 200"
xmlns="http://www.w3.org/2000/svg"
onload="StartAnimation(evt)" version="1.1">
<script type="application/ecmascript"><![CDATA[
var timevalue = 0;
var timer_increment = 50;
var max_time = 5000;
var text_element;
function StartAnimation(evt) {
text_element = evt.target.ownerDocument.getElementById("TextElement");
ShowAndGrowElement();
}
function ShowAndGrowElement() {
timevalue = timevalue + timer_increment;
if (timevalue > max_time)
return;
// Scale the text string gradually until it is 20 times larger
scalefactor = (timevalue * 20.) / max_time;
text_element.setAttribute("transform", "scale(" + scalefactor + ")");
// Make the string more opaque
opacityfactor = timevalue / max_time;
text_element.setAttribute("opacity", opacityfactor);
// Call ShowAndGrowElement again <timer_increment> milliseconds later.
setTimeout("ShowAndGrowElement()", timer_increment)
}
window.ShowAndGrowElement = ShowAndGrowElement
]]></script>
<rect x="1" y="1" width="398" height="198"
fill="none" stroke="blue" stroke-width="2"/>
<g transform="translate(50,150)" fill="red" font-size="7">
<text id="TextElement">SVG</text>
</g>
</svg>
At
zero seconds |
At
2.5 seconds |
At
five seconds |
Продивитись цей приклад як SVG (потрібен переглядач з підтримкою SVG)
above SVG file contains a single графічний елемент, a text string that says "SVG". animation loops for 5 seconds. text string starts out small and transparent and grows to be large and opaque. Here is an explanation of how this example works:
StartAnimation.StartAnimation()
function is only called once to give a value to global variable text_element
and to make the initial call to ShowAndGrowElement(). ShowAndGrowElement()
is called every 50 milliseconds and resets the ‘transform’ and ‘style’ attributes on the text
element to new values each time it is called. At the end of ShowAndGrowElement,
the function tells the ECMAScript engine to call itself again after 50
more milliseconds.Якщо scripts are modifying the same attributes or properties that are being animated by SVG's animation elements, the scripts modify the base value for the animation. Якщо a base value is modified while an animation element is animating the corresponding attribute or property, the animations are required to adjust dynamically to the new base value.
Якщо a script is modifying a property on the override style sheet at the same time that an animation element is animating that property, the result is implementation-dependent; таким чином, it is recommended that this be avoided.
Below are the DOM interfaces for the elements defined in this chapter. In addition, ElementTimeControl and TimeEvent, which are from SMIL Animation, are included here for easy reference.
SMIL Animation supports several methods for controlling the behavior of
animation: beginElement(), beginElementAt(),
endElement() and endElementAt(). These
methods are used to begin and end the active duration of an element.
Authors can (but are not required to) declare the timing to respond to
the DOM using the following syntax:
<animate begin="indefinite" end="indefinite" .../>
Якщо a DOM method call is made to begin or end the element (using beginElement(),
beginElementAt(), endElement() or endElementAt()),
each method call creates a single instance time (in the appropriate
instance times list). These times are then interpreted as part of the
semantics of lists of times, as described in Evaluation
of begin and end time lists.
beginElement() or endElement()
call is the current presentation time at the time of the DOM method
call.beginElementAt() or endElementAt()
call is the current presentation time at the time of the DOM method
call, plus or minus the specified offset.beginElement() is subject to the ‘restart’ attribute in the same
manner that event-based begin timing is. Refer also to SMIL
Animation: Restarting animation ([SMILANIM],
section 3.3.7).expectation of the following interface is that an instance of the ElementTimeControl interface can be obtained by using binding-specific casting methods on an instance of an animation element. A DOM application can use the hasFeature method of the DOMImplementation interface to determine whether the ElementTimeControl interface is supported or not. feature string for this interface is "TimeControl".
interface ElementTimeControl {
void beginElement();
void beginElementAt(in float offset);
void endElement();
void endElementAt(in float offset);
};
beginElementAt(0). endElementAt(0). For the corresponding Java binding, see section 6.4 of SMIL Animation [SMILANIM].
TimeEvent interface, defined in SMIL Animation: Supported interfaces, provides specific contextual information associated with Time events.
different types of events that can occur are:
interface TimeEvent : Event { readonly attribute AbstractView view; readonly attribute long detail; void initTimeEvent(in DOMString typeArg, in AbstractView viewArg, in long detailArg); };
For the corresponding Java binding, see section 6.4 of SMIL Animation [SMILANIM].
SVGAnimationElement interface is the base interface for all of the animation element interfaces: SVGAnimateElement, SVGSetElement, SVGAnimateColorElement, SVGAnimateMotionElement and SVGAnimateTransformElement.
Unlike other SVG DOM interfaces, the SVG DOM does not specify
convenience DOM properties corresponding to the various language
attributes on SVG's animation elements. Specification of these
convenience properties in a way that will be compatible with future
versions of SMIL Animation is expected in a future version of SVG.
current method for accessing and modifying the attributes on the
animation elements is to use the standard getAttribute, setAttribute,
getAttributeNS and setAttributeNS defined in
DOM
Level 2 Core [DOM2].
Інтерфейс SVGAnimationElement : SVGElement, SVGTests, SVGExternalResourcesRequired, ElementTimeControl { readonly attribute SVGElement targetElement; float getStartTime() raises(DOMException); float getCurrentTime(); float getSimpleDuration() raises(DOMException); };
SVGAnimateElement інтерфейс відповідає ‘animate’ element.
Object-oriented access to the attributes of the ‘animate’ element via the SVG DOM is not available.
Інтерфейс SVGAnimateElement : SVGAnimationElement, SVGStylable { };
SVGSetElement інтерфейс відповідає ‘set’ element.
Object-oriented access to the attributes of the ‘set’ element via the SVG DOM is not available.
Інтерфейс SVGSetElement : SVGAnimationElement { };
SVGAnimateMotionElement інтерфейс відповідає ‘animateMotion’ element.
Object-oriented access to the attributes of the ‘animateMotion’ element via the SVG DOM is not available.
Інтерфейс SVGAnimateMotionElement : SVGAnimationElement { };
SVGMPathElement інтерфейс відповідає ‘mpath’ element.
Інтерфейс SVGMPathElement : SVGElement, SVGURIReference, SVGExternalResourcesRequired { };
SVGAnimateColorElement інтерфейс відповідає ‘animateColor’ element.
Object-oriented access to the attributes of the ‘animateColor’ element via the SVG DOM is not available.
Інтерфейс SVGAnimateColorElement : SVGAnimationElement, SVGStylable { };
SVGAnimateTransformElement інтерфейс відповідає ‘animateTransform’ element.
Object-oriented access to the attributes of the ‘animateTransform’ element via the SVG DOM is not available.
Інтерфейс SVGAnimateTransformElement : SVGAnimationElement { };
Reliable delivery of fonts is a requirement for SVG. Designers need to create SVG content with arbitrary fonts and know that the same graphical result will appear when the content is viewed by all end users, even when end users do not have the necessary fonts installed on their computers. This parallels the print world, where the designer uses a given font when authoring a drawing for print, and the graphical content appears exactly the same in the printed version as it appeared on the designer's authoring system.
SVG utilizes the WebFonts facility defined in CSS2 ([CSS2], section 15.1) as a key mechanism for reliable delivery of font data to end users. In a common scenario, SVG authoring applications generate compressed, subsetted WebFonts for all text elements used by a given фрагменту документу SVG. Typically, the WebFonts are saved in a location relative to the referencing document.
One disadvantage to the WebFont facility to date is that specifications such as CSS2 do not require support of particular font formats. result is that different implementations support different Web font formats, thereby making it difficult for Web site creators to post a single Web site using WebFonts that work across all користувацькі агенти.
To provide a common font format for SVG that is guaranteed to be supported by all conforming SVG viewers, SVG provides a facility to define fonts in SVG. This facility is called SVG fonts.
SVG fonts can improve the semantic richness of graphics that represent text. For example, many company logos consist of the company name drawn artistically. In some cases, accessibility may be enhanced by expressing the logo as a series of glyphs in an SVG font and then rendering the logo as a ‘text’ element which references this font.
An SVG font is a font defined using SVG's ‘font’ element.
purpose of SVG fonts is to allow for delivery of glyph outlines in display-only environments. SVG fonts that accompany Web pages must be supported only in browsing and viewing situations. Graphics editing applications or file translation tools must not attempt to convert SVG fonts into system fonts. intent is that SVG files be interchangeable between two content creators, but not the SVG fonts that might accompany these SVG files. Instead, each content creator will need to license the given font before being able to successfully edit the SVG file. ‘font-face-name’ element indicates the name of licensed font to use for editing.
SVG fonts contain unhinted font outlines. Because of this, on many implementations there will be limitations regarding the quality and legibility of text in small font sizes. For increased quality and legibility in small font sizes, content creators may want to use an alternate font technology, such as fonts that ship with operating systems or an alternate WebFont format.
Because SVG fonts are expressed using SVG elements and attributes, in some cases the SVG font will take up more space than if the font were expressed in a different WebFont format which was especially designed for compact expression of font data. For the fastest delivery of Web pages, content creators may want to use an alternate font technology.
A key значення SVG fonts is guaranteed availability in SVG користувацькі агенти. In some situations, it might be appropriate for an SVG font to be the first choice for rendering some text. In other situations, the SVG font might be an alternate, back-up font in case the first choice font (perhaps a hinted system font) is not available to a given user.
characteristics and attributes of SVG fonts correspond closely to the font characteristics and parameters described in the Fonts chapter of the Cascading Style Sheets (CSS) level 2 specification ([CSS2], chapter 15). In this model, various font metrics, such as advance values and baseline locations, and the glyph outlines themselves, are expressed in units that are relative to an abstract square whose height is the intended distance between lines of type in the same type size. This square is called the em square and it is the design grid on which the glyph outlines are defined. значення the ‘units-per-em’ attribute on the ‘font-face’ element specifies how many units the em square is divided into. Common values for other font types are, for example, 250 (Intellifont), 1000 (Type 1) and 2048 (TrueType, TrueType GX and Open-Type). Unlike standard graphics in SVG, where the початкова координатна система has the y-axis pointing downward (дивіться початкова координатна система), the design grid for SVG fonts, along with the початкова координатна система for the glyphs, has the y-axis pointing upward for consistency with accepted industry practice for many popular font formats.
SVG fonts and their associated glyphs do not specify bounding box information. Because the glyph outlines are expressed as SVG графічний елементи, the implementation has the option to render the glyphs either using standard graphics calls or by using special-purpose font rendering technology, in which case any necessary maximum bounding box and overhang calculations can be performed from analysis of the графічний елементи contained within the glyph outlines.
An SVG font can be either embedded within the same document that uses the font or saved as part of an external resource.
Here is an example of how you might embed an SVG font inside of документ SVG.
<?xml version="1.0" standalone="yes"?>
<svg width="400px" height="300px" version="1.1"
xmlns = 'http://www.w3.org/2000/svg'>
<defs>
<font id="Font1" horiz-adv-x="1000">
<font-face font-family="Super Sans" font-weight="bold" font-style="normal"
units-per-em="1000" cap-height="600" x-height="400"
ascent="700" descent="300"
alphabetic="0" mathematical="350" ideographic="400" hanging="500">
<font-face-src>
<font-face-name name="Super Sans Bold"/>
</font-face-src>
</font-face>
<missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph>
<glyph unicode="!" horiz-adv-x="300"><!-- Outline of exclam. pt. glyph --></glyph>
<glyph unicode="@"><!-- Outline of @ glyph --></glyph>
<!-- more glyphs -->
</font>
</defs>
<text x="100" y="100"
style="font-family: 'Super Sans', Helvetica, sans-serif;
font-weight: bold; font-style: normal">Text
using embedded font</text>
</svg>
Here is an example of how you might use the CSS @font-face facility ([CSS2], section 15.3.1) to reference an SVG font which is saved in an external file. First referenced SVG font file:
<?xml version="1.0" standalone="yes"?>
<svg width="100%" height="100%" version="1.1"
xmlns = 'http://www.w3.org/2000/svg'>
<defs>
<font id="Font2" horiz-adv-x="1000">
<font-face font-family="Super Sans" font-weight="normal" font-style="italic"
units-per-em="1000" cap-height="600" x-height="400"
ascent="700" descent="300"
alphabetic="0" mathematical="350" ideographic="400" hanging="500">
<font-face-src>
<font-face-name name="Super Sans Italic"/>
</font-face-src>
</font-face>
<missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph>
<glyph unicode="!" horiz-adv-x="300"><!-- Outline of exclam. pt. glyph --></glyph>
<glyph unicode="@"><!-- Outline of @ glyph --></glyph>
<!-- more glyphs -->
</font>
</defs>
</svg>
SVG file which uses/references the above SVG font
<?xml version="1.0" standalone="yes"?>
<svg width="400px" height="300px" version="1.1"
xmlns = 'http://www.w3.org/2000/svg'>
<defs>
<style type="text/css">
<![CDATA[
@font-face {
font-family: 'Super Sans';
font-weight: normal;
font-style: italic;
src: url("myfont.svg#Font2") format("svg")
}
]]>
</style>
</defs>
<text x="100" y="100"
style="font-family: 'Super Sans'; font-weight:normal;
font-style: italic">Text using referenced font</text>
</svg>
‘font’ element defines an SVG font.
Визначення атрибутів:
Each ‘font’ element must have a ‘font-face’ child element which описує various characteristics of the font.
‘glyph’ element defines the graphics for a given glyph. coordinate system for the glyph is defined by the various attributes in the ‘font’ element.
graphics that make up the ‘glyph’ can be a single path data specification within the ‘d’ attribute, arbitrary SVG as content within the ‘glyph’, or both. These two alternatives are processed differently (дивіться below).
Визначення атрибутів:
graphics for the ‘glyph’ can be specified using either the ‘d’ attribute or arbitrary SVG as content within the ‘glyph’.
Якщо the ‘d’ attribute is specified, then the path data within this attribute is processed as follows:
Якщо the ‘glyph’ has child elements, then those child elements are rendered in a manner similar to how the ‘use’ element renders a referenced symbol. rendering effect is as if the contents of the referenced ‘glyph’ element were deeply cloned into a separate non-exposed DOM tree. Because the cloned DOM tree is non-exposed, the SVG DOM does not show the cloned instance.
For користувацькі агенти that support Styling with CSS, the conceptual deep cloning of the referenced ‘glyph’ element into a non-exposed DOM tree also copies any property values resulting from the CSS cascade ([CSS2], chapter 6) on the referenced ‘glyph’ and its contents, and also applies any property values on the ‘font’ element. CSS2 selectors can be applied to the original (тобто, referenced) elements because they are part of the formal document structure. CSS2 selectors cannot be applied to the (conceptually) cloned DOM tree because its contents are not part of the formal document structure.
Property inheritance, however, works as if the referenced ‘glyph’ had been textually included as a deeply cloned child within the document tree. referenced ‘glyph’ inherits properties from the element that contains the characters that correspond to the ‘glyph’. ‘glyph’ does not inherit properties from the ‘font’ element's original parents.
In the generated content, for each instance of a given ‘glyph’, a ‘g’ is created which carries with it all property values resulting from the CSS cascade on the ‘font’ element for the referenced ‘glyph’. Within this ‘g’ is another ‘g’ which carries with it all property values resulting from the CSS cascade on the ‘glyph’ element. original contents of the ‘glyph’ element are deep-cloned within the inner ‘g’ element.
Якщо the ‘glyph’ has both a ‘d’ attribute and child elements, the ‘d’ attribute is rendered first, and then the child elements.
In general, the ‘d’ attribute renders in the same manner as system fonts. For example, a dashed pattern will usually look the same if applied to a system font or to an SVG font which defines its glyphs using the ‘d’ attribute. Many implementations will be able to render glyphs defined with the ‘d’ attribute quickly and will be able to use a font cache for further performance gains.
Defining a glyph by including child elements within the ‘glyph’ gives greater flexibility but more complexity. Different fill and stroke techniques can бути використано on different parts of the glyphs. For example, the base of an "i" could be red, and the dot could be blue. This approach has an inherent complexity with units. Any properties specified on a text elements which represents a length, such as the ‘stroke-width’ property, might produce surprising results since the length value will be processed in the coordinate system of the glyph.
‘missing-glyph’ element defines the graphics to use if there is an attempt to draw a glyph from a given font and the given glyph has not been defined. attributes on the ‘missing-glyph’ element have the same meaning as the corresponding attributes on the ‘glyph’ element.
When determining the glyph(s) to draw a given character sequence, the ‘font’ element is searched from its first ‘glyph’ element to its last in logical order to see if the upcoming sequence of Unicode characters to be rendered matches the sequence of Unicode characters specified in the ‘unicode’ attribute for the given ‘glyph’ element. first successful match is used. Thus, the "ffl" ligature needs to be defined in the font before the "f" glyph; otherwise, the "ffl" will never be selected.
Note that any occurrences of ‘altGlyph’ take precedence over the above glyph selection rules within an SVG font.
‘hkern’ and ‘vkern’ elements define kerning pairs for horizontally-oriented and vertically-oriented pairs of glyphs, respectively.
Kern pairs identify pairs of glyphs within a single font whose inter-glyph spacing is adjusted when the pair of glyphs are rendered next to each other. In addition to the requirement that the pair of glyphs are from the same font, SVG font kerning happens only when the two glyphs correspond to characters which have the same values for properties ‘font-family’, ‘font-size’, ‘font-style’, ‘font-weight’, ‘font-variant’, ‘font-stretch’, ‘font-size-adjust’ and ‘font’.
An example of a kerning pair are the letters "Va", where the typographic result might look better if the letters "V" and the "a" were rendered slightly closer together.
Right-to-left and bidirectional text in SVG is laid out in a two-step process, which is described in Relationship with bidirectionality. Якщо SVG fonts are used, before kerning is applied, characters are re-ordered into left-to-right (or top-to-bottom, for vertical text) visual rendering order. Kerning from SVG fonts is then applied on pairs of glyphs which are rendered contiguously. first glyph in the kerning pair is the left (or top) glyph in visual rendering order. second glyph in the kerning pair is the right (or bottom) glyph in the pair.
For convenience to font designers and to minimize file sizes, a single ‘hkern’ and ‘vkern’ can define a single kerning adjustment value between one set of glyphs (тобто, a range of Unicode characters) and another set of glyphs (тобто, another range of Unicode characters).
‘hkern’ element defines kerning pairs and adjustment values in the horizontal advance value when drawing pairs of glyphs which the two glyphs are contiguous and are both rendered horizontally (тобто, side-by-side). spacing between characters is reduced by the kerning adjustment. (Negative kerning adjustments increase the spacing between characters.)
‘vkern’ element defines kerning pairs and adjustment values in the vertical advance value when drawing pairs of glyphs together when stacked vertically. spacing between characters is reduced by the kerning adjustment.
Визначення атрибутів:
At least one each of ‘u1’ or ‘g1’ and at least one of ‘u2’ or ‘g2’ must be provided.
A font description provides the bridge between an author's font specification and the font data, which is the data needed to format text and to render the abstract glyphs to which the characters map — the actual scalable outlines or bitmaps. Fonts are referenced by properties, such as the ‘font-family’ property.
Each specified font description is added to the font database and so that it can бути використано to select the relevant font data. font description contains descriptors such as the location of the font data on the Web, and characterizations of that font data. font descriptors are also needed to match the font properties to particular font data. level of detail of a font description can vary from just the name of the font up to a list of glyph widths.
For more about font descriptions, refer to the Fonts chapter in the CSS2 specification ([CSS2], chapter 15).
Font descriptions can be specified in either of the following ways:
‘font-face’ element corresponds directly to the @font-face facility in CSS2 ([CSS2], section 15.3.1). It can бути використано to describe the characteristics of any font, SVG font or otherwise.
When used to describe the characteristics of an SVG font contained within the same document, it is recommended that the ‘font-face’ element be a child of the ‘font’ element it is describing so that the ‘font’ element can be self-contained and fully-described. In this case, any ‘font-face-src’ elements within the ‘font-face’ element are ignored as it is assumed that the ‘font-face’ element is describing the characteristics of its parent ‘font’ element.
Визначення атрибутів:
following elements and attributes correspond to the ‘src’ descriptor within an @font-face rule. (Refer to the descriptions of the @font-face rule and 'src' descriptor in the CSS2 specification ([CSS2], sections 15.3.1 and 15.3.5.)
‘font-face-src’ element, together with the ‘font-face-uri’ and ‘font-face-format’ elements described in the following sections, correspond to the ‘src’ descriptor within an @font-face rule. (Refer to the descriptions of the @font-face rule and 'src' descriptor in the CSS2 specification ([CSS2], sections 15.3.1 and 15.3.5).
A ‘font-face-src’ element contains ‘font-face-uri’ and ‘font-face-name’ elements, which are used for referencing external and local fonts, respectively.
‘font-face-uri’ element is used within a ‘font-face-src’ element to reference a font defined inside or outside of the current SVG document.
When a ‘font-face-uri’ is referencing an SVG font, then that reference must be to an SVG ‘font’ element, therefore requiring the use of a fragment identifier [RFC3986]. referenced ‘font’ element can be local (тобто, within the same document as the ‘font-face-uri’ element) or remote (тобто, within a different document).
Визначення атрибутів:
Child ‘font-face-format’ elements of a ‘font-face-uri’ element are used to specify the supported formats of the font referenced by that ‘font-face-uri’ element. They correspond to entries in a format(…) clause of the ‘src’ descriptor in an @font-face rule.
Визначення атрибутів:
‘font-face-name’ element is used within a ‘font-face-src’ element to reference a local font by name. It corresponds to a local(…) clause in an @font-face rule ‘src’ descriptor.
Визначення атрибутів:
SVGFontElement інтерфейс відповідає ‘font’ element.
Object-oriented access to the attributes of the ‘font’ element via the SVG DOM is not available.
Інтерфейс SVGFontElement : SVGElement, SVGExternalResourcesRequired, SVGStylable { };
SVGGlyphElement інтерфейс відповідає ‘glyph’ element.
Object-oriented access to the attributes of the ‘glyph’ element via the SVG DOM is not available.
Інтерфейс SVGGlyphElement : SVGElement, SVGStylable { };
SVGMissingGlyphElement інтерфейс відповідає ‘missing-glyph’ element.
Object-oriented access to the attributes of the ‘missing-glyph’ element via the SVG DOM is not available.
Інтерфейс SVGMissingGlyphElement : SVGElement, SVGStylable { };
SVGHKernElement інтерфейс відповідає ‘hkern’ element.
Object-oriented access to the attributes of the ‘hkern’ element via the SVG DOM is not available.
Інтерфейс SVGHKernElement : SVGElement { };
SVGVKernElement інтерфейс відповідає ‘vkern’ element.
Object-oriented access to the attributes of the ‘vkern’ element via the SVG DOM is not available.
Інтерфейс SVGVKernElement : SVGElement { };
SVGFontFaceElement інтерфейс відповідає ‘font-face’ element.
Object-oriented access to the attributes of the ‘font-face’ element via the SVG DOM is not available.
Інтерфейс SVGFontFaceElement : SVGElement { };
SVGFontFaceSrcElement інтерфейс відповідає ‘font-face-src’ element.
Object-oriented access to the attributes of the ‘font-face-src’ element via the SVG DOM is not available.
Інтерфейс SVGFontFaceSrcElement : SVGElement { };
SVGFontFaceUriElement інтерфейс відповідає ‘font-face-uri’ element.
Object-oriented access to the attributes of the ‘font-face-uri’ element via the SVG DOM is not available.
Інтерфейс SVGFontFaceUriElement : SVGElement { };
SVGFontFaceFormatElement інтерфейс відповідає ‘font-face-format’ element.
Object-oriented access to the attributes of the ‘font-face-format’ element via the SVG DOM is not available.
Інтерфейс SVGFontFaceFormatElement : SVGElement { };
SVGFontFaceNameElement інтерфейс відповідає ‘font-face-name’ element.
Object-oriented access to the attributes of the ‘font-face-name’ element via the SVG DOM is not available.
Інтерфейс SVGFontFaceNameElement : SVGElement { };
Metadata is structured data about data.
In the computing industry, there are ongoing standardization efforts towards metadata with the goal of promoting industry interoperability and efficiency. Content creators should track these developments and include appropriate metadata in their SVG content which conforms to these various metadata standards as they emerge.
W3C has a Semantic Web Activity which has been established to serve a leadership role, in both the design of enabling specifications and the open, collaborative development of technologies that support the automation, integration and reuse of data across various applications. Semantic Web Activity builds upon the earlier W3C Metadata Activity, including the definition of Resource Description Framework (RDF). RDF Primer is the first in a set of six documents that define the Resource Description Framework [RDF-PRIMER].
Another activity relevant to most applications of metadata is the Dublin Core [DCORE], which is a set of generally applicable core metadata properties (тобто, Title, Creator/Author, Subject, Description, etc.).
Individual industries or individual content creators are free to define their own metadata schema but are encouraged to follow existing metadata standards and use standard metadata schema wherever possible to promote interchange and interoperability. Якщо a particular standard metadata schema does not meet your needs, then it is usually better to define an additional metadata schema in an existing framework such as RDF and to use custom metadata schema in combination with standard metadata schema, rather than totally ignore the standard schema.
Metadata which is included with SVG content should be specified within ‘metadata’ elements. contents of the ‘metadata’ should be elements from other XML namespaces, with these elements from these namespaces expressed in a manner conforming with the Namespaces in XML Recommendation [XML-NS].
Authors should provide a ‘metadata’ child element to the outermost svg element within a stand-alone SVG document. ‘metadata’ child element to an ‘svg’ element serves the purposes of identifying document-level metadata.
DTD definitions of many of SVG's elements (particularly, container and text elements) place no restriction on the placement or number of the ‘metadata’ sub-elements. This flexibility is only present so that there will be a consistent content model for контейнерний елементи, because some контейнерний елементи in SVG allow for mixed content, and because the mixed content rules for XML ([XML10], section 3.2.2) do not permit the desired restrictions. Representations of future versions of the SVG language might use more expressive representations than DTDs which allow for more restrictive mixed content rules. It is strongly recommended that at most one ‘metadata’ element appear as a child of any particular element, and that this element appear before any other child elements (except possibly ‘desc’ or ‘title’ elements) or character data content. Якщо metadata-processing користувацькі агенти need to choose among multiple ‘metadata’ elements for processing it should choose the first one.
Here is an example of how metadata can be included in документ SVG. example uses the Dublin Core version 1.1 schema. (Other XML-compatible metadata languages, including ones not based on RDF, can бути використано also.)
<?xml version="1.0" standalone="yes"?>
<svg width="4in" height="3in" version="1.1"
xmlns = 'http://www.w3.org/2000/svg'>
<desc xmlns:myfoo="http://example.org/myfoo">
<myfoo:title>This is a financial report</myfoo:title>
<myfoo:descr> global description uses markup from the
<myfoo:emph>myfoo</myfoo:emph> namespace.</myfoo:descr>
<myfoo:scene><myfoo:what>widget $growth</myfoo:what>
<myfoo:contains>$three $graph-bar</myfoo:contains>
<myfoo:when>1998 $through 2000</myfoo:when> </myfoo:scene>
</desc>
<metadata>
<rdf:RDF
xmlns:rdf = "http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:rdfs = "http://www.w3.org/2000/01/rdf-schema#"
xmlns:dc = "http://purl.org/dc/elements/1.1/" >
<rdf:Description about="http://example.org/myfoo"
dc:title="MyFoo Financial Report"
dc:description="$three $bar $thousands $dollars $from 1998 $through 2000"
dc:publisher="Приклад Organization"
dc:date="2000-04-11"
dc:format="image/svg+xml"
dc:language="en" >
<dc:creator>
<rdf:Bag>
<rdf:li>Irving Bird</rdf:li>
<rdf:li>Mary Lambert</rdf:li>
</rdf:Bag>
</dc:creator>
</rdf:Description>
</rdf:RDF>
</metadata>
</svg>
Інтерфейс SVGMetadataElement : SVGElement { };
A користувацький агент (UA) might not have the ability to process and view SVG content. following list outlines two of the backwards compatibility scenarios associated with SVG content:
For XML grammars with the ability to embed SVG content, it is assumed that some sort of alternate representation capability such as the ‘switch’ element and some sort of feature-availability test facility (such as what is described in the SMIL 3.0 specification [SMIL]) will be available.
This ‘switch’ element and feature-availability test facility (or their equivalents) are the recommended way for XML authors to provide an alternate representation to SVG content, such as an image or a text string. following example shows how to embed an SVG drawing within a SMIL 1.0 document such that an alternate image will display in the event the користувацький агент doesn't support SVG. Note that the MIME type in the ‘type’ attribute is an important means for the користувацький агент to decide if it can decode the referenced media.
In this example, the SVG content is included via a URL reference. With some parent XML grammars it will also be possible to include an фрагменту документу SVG inline within the same file as its parent grammar.
<?xml version="1.0" standalone="yes"?>
<smil>
<body>
<!-- With SMIL 1.0, the first child element of 'switch'
which the SMIL 1.0 користувацький агент is able to process
and which tests true will get processed and all other
child elements will have no visual effect. In this case,
if the SMIL 1.0 користувацький агент can process "image/svg+xml",
then the SVG will appear; otherwise, the alternate image
(the second child element) will appear. -->
<switch>
<!-- Render the SVG if possible. -->
<ref type="image/svg+xml" src="drawing.svg" />
<!-- Else, render the alternate image. -->
<img src="alternate_image.jpg" />
</switch>
</body>
</smil>
For HTML 4, SVG drawings can be embedded using the ‘object’ element. An alternate representation such as an image can be included as the content of the ‘object’ element. In this case, the SVG content usually will be included via a URL reference. following example shows how to use the ‘object’ element to include an SVG drawing via a URL reference with an image serving as the alternate representation in the absence of an SVG користувацький агент:
<html>
<body>
<object type="image/svg+xml" data="drawing.svg">
<!-- contents of the 'object' element (тобто, an alternate
image) are drawn in the event the користувацький агент cannot process
the SVG drawing. -->
<img src="alternate_image.jpg" alt="alternate description">
</object>
</body>
</html>
SVG allows inclusion of elements from foreign namespaces anywhere with the SVG content. In general, the SVG користувацький агент will include the unknown elements in the DOM but will otherwise ignore unknown elements. ( notable exception is described under Embedding Foreign Object Types.)
Additionally, SVG allows inclusion of attributes from foreign namespaces on any SVG element. SVG користувацький агент will include unknown attributes in the DOM but with otherwise ignore unknown attributes.
SVG's ability to include foreign namespaces can бути використано for the following purposes:
To illustrate, a business graphics authoring application might want to include some private data within документ SVG so that it could properly reassemble the chart (a pie chart in this case) upon reading it back in:
<?xml version="1.0" standalone="yes"?>
<svg width="4in" height="3in" version="1.1"
xmlns = 'http://www.w3.org/2000/svg'>
<defs>
<myapp:piechart xmlns:myapp="http://example.org/myapp"
title="Sales by Region">
<myapp:pieslice label="Northern Region" value="1.23"/>
<myapp:pieslice label="Eastern Region" value="2.53"/>
<myapp:pieslice label="Southern Region" value="3.89"/>
<myapp:pieslice label="Western Region" value="2.04"/>
<!-- Other private data goes here -->
</myapp:piechart>
</defs>
<desc>This chart includes private data in another namespace
</desc>
<!-- In here would be the actual SVG графічний елементи which
draw the pie chart -->
</svg>
One goal for SVG is to provide a mechanism by which other XML language processors can render into an area within an SVG drawing, with those renderings subject to the various transformations and compositing parameters that are currently active at a given point within the SVG content tree. One particular example of this is to provide a frame for XML content styled with CSS or XSL so that dynamically reflowing text (subject to SVG transformations and compositing) could be inserted into the middle of some SVG content. Another example is inserting a MathML expression into an SVG drawing [MATHML].
‘foreignObject’ element allows for inclusion of a foreign namespace which has its graphical content drawn by a different користувацький агент. included foreign graphical content is subject to SVG transformations and compositing.
contents of ‘foreignObject’ are assumed to be from a different namespace. Any SVG elements within a ‘foreignObject’ will not be drawn, except in the situation where a properly defined SVG subdocument with a proper ‘xmlns’ (дивіться Namespaces in XML [XML-NS]) attribute specification is embedded recursively. One situation where this can occur is when an фрагменту документу SVG is embedded within another non-фрагменту документу SVG, which in turn is embedded within an фрагменту документу SVG (тобто, an фрагменту документу SVG contains an XHTML фрагмент документу which in turn contains yet another фрагменту документу SVG).
Usually, a ‘foreignObject’ will бути використано in conjunction with the ‘switch’ element and the ‘requiredExtensions’ attribute to provide proper checking for користувацький агент support and provide an alternate rendering in case користувацький агент support is not available.
Визначення атрибутів:
Here is an example:
<?xml version="1.0" standalone="yes"?>
<svg width="4in" height="3in" version="1.1"
xmlns = 'http://www.w3.org/2000/svg'>
<desc>This example uses the 'switch' element to provide a
fallback graphical representation of an paragraph, if
XMHTML is not supported.</desc>
<!-- 'switch' element will process the first child element
whose testing attributes evaluate to true.-->
<switch>
<!-- Process the embedded XHTML if the requiredExtensions attribute
evaluates to true (тобто, the користувацький агент supports XHTML
embedded within SVG). -->
<foreignObject width="100" height="50"
requiredExtensions="http://example.com/SVGExtensions/EmbeddedXHTML">
<!-- XHTML content goes here -->
<body xmlns="http://www.w3.org/1999/xhtml">
<p>Here is a paragraph that requires word wrap</p>
</body>
</foreignObject>
<!-- Else, process the following alternate SVG.
Note that there are no testing attributes on the 'text' element.
Якщо no testing attributes are provided, it is as if there
were testing attributes and they evaluated to true.-->
<text font-size="10" font-family="Verdana">
<tspan x="10" y="10">Here is a paragraph that</tspan>
<tspan x="10" y="20">requires word wrap.</tspan>
</text>
</switch>
</svg>
It is not required that SVG користувацький агент support the ability to invoke other arbitrary користувацькі агенти to handle embedded foreign object types; however, all conforming SVG користувацькі агенти would need to support the ‘switch’ element and must be able to render valid SVG elements when they appear as one of the alternatives within a ‘switch’ element.
Ultimately, it is expected that commercial Web browsers will support the ability for SVG to embed content from other XML grammars which use CSS or XSL to format their content, with the resulting CSS- or XSL-formatted content subject to SVG transformations and compositing. At this time, such a capability is not a requirement.
Using foreign namespaces as an extension mechanism adds flexibility, is readily handled by validation technologies like NVDL and RelaxNG, but typically breaks DTD validation unless the DTD has explicit extensibility hooks.
SVG DTD allows for extending the SVG language within the internal DTD subset. Within the internal DTD subset, you have the ability to add custom elements and attributes to most SVG elements. This facility may бути використано if DTD validation is desired.
DTD defines an extension entity for most of SVG elements. For example, the ‘view’ element is defined in the DTD as follows:
<!ENTITY % SVG.view.extra.content "" >
<!ENTITY % SVG.view.element "INCLUDE" >
<![%SVG.view.element;[
<!ENTITY % SVG.view.content
"( %SVG.Description.class; %SVG.view.extra.content; )*"
>
<!ELEMENT %SVG.view.qname; %SVG.view.content; >
<!-- end of SVG.view.element -->]]>
<!ENTITY % SVG.view.attlist "INCLUDE" >
<![%SVG.view.attlist;[
<!ATTLIST %SVG.view.qname;
%SVG.Core.attrib;
%SVG.External.attrib;
viewBox %ViewBoxSpec.datatype; #IMPLIED
preserveAspectRatio %PreserveAspectRatioSpec.datatype; 'xMidYMid meet'
zoomAndPan ( disable | magnify ) 'magnify'
viewTarget CDATA #IMPLIED
>
<!-- end of SVG.view.attlist -->]]>
entity SVG.view.extra.content can be defined in the
internal DTD subset to add custom sub-elements attributes to the ‘view’ element within a given
document, and an <!ATTLIST> can бути використано to
add custom attributes. For example, the following extends the ‘view’ element with an additional
child element ‘customNS:customElement’
and an additional attribute ‘customNS:customAttr’:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!ENTITY % SVG.view.extra.content "| customNS:customElement" >
<!ATTLIST %SVG.view.qname;
xmlns:customNS CDATA #FIXED "http://www.example.org/customNS"
customNS:customAttr CDATA #IMPLIED>
<!ELEMENT customNS:customElement EMPTY>
<!ATTLIST customNS:customElement
xmlns:customNS CDATA #FIXED "http://www.example.org/customNS"
info CDATA #IMPLIED>
]>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="8cm" height="4cm">
<desc>Extend the 'view' element via the internal DTD subset</desc>
<!-- Presumably, some great graphics would go here. -->
<view viewBox="100 110 20 30" customNS:customAttr="123">
<customNS:customElement info="abc"/>
</view>
</svg>
Інтерфейс SVGForeignObjectElement : SVGElement, SVGTests, SVGLangSpace, SVGExternalResourcesRequired, SVGStylable, SVGTransformable { readonly attribute SVGAnimatedLength x; readonly attribute SVGAnimatedLength y; readonly attribute SVGAnimatedLength width; readonly attribute SVGAnimatedLength height; };
This appendix is normative.
This appendix defines a DTD for SVG 1.1, which is used as part of determining whether a given document or фрагмент документу is conforming. Дивіться Conformance Criteria for details on how the DTD is to бути використано in this regard. Note in particular that simply validating a given XML document against this DTD cannot definitively, by itself, determine conformance to this specification.
Якщо errors are found in this DTD, then they will be listed in the SVG 1.1 Second Edition errata. A dated version of the flattened DTD will always be available from http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat-20110816.dtd.
modularization of SVG included here is a decomposition of SVG 1.0 [SVG10] and errata into a collection of abstract modules that provide specific units of functionality. These modules may be combined with each other and with modules defined in other specifications (such as XHTML) to create SVG subset and extension document types that qualify as members of the SVG family of document types. Дивіться Conformance for a description of SVG family documents, and An XHTML + MathML + SVG Profile [XHTMLplusMathMLplusSVG] for a profile that combines XHTML, MathML and SVG.
Each major section of the SVG specification corresponds to a module named after that section, e.g. "Text Module" or "Basic Structure Module". A module without the "Basic" prefix implies that the module includes the complete set of elements and attributes, with no restrictions, from the corresponding section of the specification. Якщо there is a need to provide a subset of the functionality of the complete module, then a Basic module is created with the "Basic" prefix added to the name of the complete module. For example, the "Basic Text Module" is a subset of the "Text Module".
It is an error for a profile of SVG 1.1 to include both the complete module and its basic subset (e.g. the "Text Module" and the "Basic Text Module").
Most modules define a named collection of elements or attributes. These collections are used as a shorthand when describing the set of attributes allowed on a particular element (e.g. the "Style" attribute collection) or the set of elements allowed as children of a particular element (e.g. the "Shape" element collection). All collections have names that begin with an uppercase character.
When defining a profile, it is assumed that all the element and attribute collections are defined to be empty. That way, a module can redefine the collection as it is included in the profile, adding elements or attributes to make them available within the profile. Therefore, it is not a mistake to refer to an element or attribute collection from a module that is not included in the profile, it simply means that collection is empty.
exception to this is the collection Presentation.attrib, which is the union of all the presentation attribute collections (i.e. all the attribute collections with the string "Presentation" in their name). Presentation.attrib is not defined in any module, but it exists in every profile.
A subset module (i.e. a Basic module) may define a different named collection from a superset module. Since it is an error to include a subset and superset module of the same group in a profile, all attribute and element collections will either be defined once by the module that includes them, or will have their default empty value (again, with the exception of Presentation.attrib which is not defined by any module).
modularization of SVG 1.1 allows profiles to be described by listing the SVG modules they allow and possibly a small number of restrictions or extensions on the elements provided by those modules.
"Full" profile of SVG 1.1 is the collection of all the complete modules listed in this specification (тобто, every module that is not a subset module).
When applied to conformance, the unqualified term "SVG" implies the "Full" profile of SVG 1.1 defined by this specification. Якщо an implementation does not implement the Full profile, it must state either the profile to which it conforms, or that it implements a subset of SVG.
DTD-based modularization has proven to be an unwieldy method of defining composable XML languages, due to the inherent inability to describe certain complex content models in DTDs as well as their being agnostic with respect to XML namespaces. While the SVG 1.1 DTD is provided in a modularized form, it is recommended that alternate technologies such as Namespace-based Validation Dispatch Language [NVDL] бути використано to accomplish XML language composition instead.
This section contains the formal definition of each of the SVG abstract modules as a DTD module. Any element and attribute collections defined by the module are also listed.
<!-- ....................................................................... -->
<!-- SVG 1.1 Modular Framework Module ...................................... -->
<!-- file: svg-framework.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ENTITIES SVG 1.1 Modular Framework//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-framework.mod"
....................................................................... -->
<!-- Modular Framework
This module instantiates the modules needed to support the SVG
modularization model, including:
+ Datatypes
+ Qualified Name
+ Document Model
+ Attribute Collection
-->
<!ENTITY % svg-datatypes.module "INCLUDE" >
<![%svg-datatypes.module;[
<!ENTITY % svg-datatypes.mod
PUBLIC "-//W3C//ENTITIES SVG 1.1 Datatypes//EN"
"svg-datatypes.mod" >
%svg-datatypes.mod;]]>
<!ENTITY % svg-qname.module "INCLUDE" >
<![%svg-qname.module;[
<!ENTITY % svg-qname.mod
PUBLIC "-//W3C//ENTITIES SVG 1.1 Qualified Name//EN"
"svg-qname.mod" >
%svg-qname.mod;]]>
<!ENTITY % svg-model.module "INCLUDE" >
<![%svg-model.module;[
<!-- instantiate the Document Model declared in the DTD driver -->
%svg-model.mod;]]>
<!ENTITY % svg-attribs.module "INCLUDE" >
<![%svg-attribs.module;[
<!-- instantiate the Attribute Collection declared in the DTD driver -->
%svg-attribs.mod;]]>
<!-- end of svg-framework.mod -->
<!-- ....................................................................... -->
<!-- SVG 1.1 Datatypes Module .............................................. -->
<!-- file: svg-datatypes.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ENTITIES SVG 1.1 Datatypes//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-datatypes.mod"
....................................................................... -->
<!-- Datatypes
This module declares common data types for properties and attributes.
-->
<!-- feature specification -->
<!ENTITY % Boolean.datatype "( false | true )" >
<!-- 'clip-rule' or 'fill-rule' property/attribute value -->
<!ENTITY % ClipFillRule.datatype "( nonzero | evenodd | inherit )" >
<!-- media type, as per [RFC2045] -->
<!ENTITY % ContentType.datatype "CDATA" >
<!-- a <coordinate> -->
<!ENTITY % Coordinate.datatype "CDATA" >
<!-- a list of <coordinate>s -->
<!ENTITY % Coordinates.datatype "CDATA" >
<!-- a <color> value -->
<!ENTITY % Color.datatype "CDATA" >
<!-- a <integer> -->
<!ENTITY % Integer.datatype "CDATA" >
<!-- a language code, as per [BCP47] -->
<!ENTITY % LanguageCode.datatype "NMTOKEN" >
<!-- comma-separated list of language codes, as per [BCP47] -->
<!ENTITY % LanguageCodes.datatype "CDATA" >
<!-- a <length> -->
<!ENTITY % Length.datatype "CDATA" >
<!-- a list of <length>s -->
<!ENTITY % Lengths.datatype "CDATA" >
<!-- a <number> -->
<!ENTITY % Number.datatype "CDATA" >
<!-- a list of <number>s -->
<!ENTITY % Numbers.datatype "CDATA" >
<!-- opacity value (тобто, <number>) -->
<!ENTITY % OpacityValue.datatype "CDATA" >
<!-- a path data specification -->
<!ENTITY % PathData.datatype "CDATA" >
<!-- 'preserveAspectRatio' attribute specification -->
<!ENTITY % PreserveAspectRatioSpec.datatype "CDATA" >
<!-- script expression -->
<!ENTITY % Script.datatype "CDATA" >
<!-- An SVG color value (RGB plus optional ICC) -->
<!ENTITY % SVGColor.datatype "CDATA" >
<!-- arbitrary text string -->
<!ENTITY % Text.datatype "CDATA" >
<!-- list of transforms -->
<!ENTITY % TransformList.datatype "CDATA" >
<!-- a Uniform Resource Identifier, see [URI] -->
<!ENTITY % URI.datatype "CDATA" >
<!-- 'viewBox' attribute specification -->
<!ENTITY % ViewBoxSpec.datatype "CDATA" >
<!-- end of svg-datatypes.mod -->
<!-- ....................................................................... -->
<!-- SVG 1.1 Qualified Name Module ......................................... -->
<!-- file: svg-qname.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ENTITIES SVG 1.1 Qualified Name//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-qname.mod"
....................................................................... -->
<!-- Qualified Name
This module is contained in two parts, labeled Section 'A' and 'B':
Section A declares parameter entities to support namespace-
qualified names, namespace declarations, and name prefixing
for SVG and extensions.
Section B declares parameter entities used to provide
namespace-qualified names for all SVG element types:
-->
<!-- Section A: SVG XML Namespace Framework :::::::::::::::::::::: -->
<!-- 1. Declare a %SVG.prefixed; conditional section keyword, used
to activate namespace prefixing. default value should
inherit '%NS.prefixed;' from the DTD driver, so that unless
overridden, the default behaviour follows the overall DTD
prefixing scheme.
-->
<!ENTITY % NS.prefixed "IGNORE" >
<!ENTITY % SVG.prefixed "%NS.prefixed;" >
<!-- 2. Declare a parameter entity (eg., %SVG.xmlns;) containing
the URI reference used to identify the SVG namespace:
-->
<!ENTITY % SVG.xmlns "http://www.w3.org/2000/svg" >
<!ENTITY % XLINK.xmlns "http://www.w3.org/1999/xlink" >
<!-- 3. Declare parameter entities (eg., %SVG.prefix;) containing
the default namespace prefix string(s) to use when prefixing
is enabled. This may be overridden in the DTD driver or the
internal subset of an document instance. Якщо no default prefix
is desired, this may be declared as an empty string.
-->
<!ENTITY % SVG.prefix "" >
<!ENTITY % XLINK.prefix "xlink" >
<!-- 4. Declare parameter entities (eg., %SVG.pfx;) containing the
colonized prefix(es) (eg., '%SVG.prefix;:') used when
prefixing is active, an empty string when it is not.
-->
<![%SVG.prefixed;[
<!ENTITY % SVG.pfx "%SVG.prefix;:" >
]]>
<!ENTITY % SVG.pfx "" >
<!ENTITY % XLINK.pfx "%XLINK.prefix;:" >
<!-- 5. parameter entity %SVG.xmlns.extra.attrib; may be
redeclared to contain any non-SVG namespace declaration
attributes for namespaces embedded in SVG. default
is an empty string.
-->
<!ENTITY % SVG.xmlns.extra.attrib "" >
<!-- Declare a parameter entity XLINK.xmlns.attrib containing
the XML Namespace declarations for XLink.
-->
<!ENTITY % XLINK.xmlns.attrib
"xmlns:%XLINK.prefix; %URI.datatype; #FIXED '%XLINK.xmlns;'"
>
<!-- Declare a parameter entity %NS.decl.attrib; containing
all XML Namespace declarations used in the DTD, plus the
xmlns declaration for SVG, its form dependent on whether
prefixing is active.
-->
<![%SVG.prefixed;[
<!ENTITY % NS.decl.attrib
"xmlns:%SVG.prefix; %URI.datatype; #FIXED '%SVG.xmlns;'
%XLINK.xmlns.attrib;
%SVG.xmlns.extra.attrib;"
>
]]>
<!ENTITY % NS.decl.attrib
"%XLINK.xmlns.attrib;
%SVG.xmlns.extra.attrib;"
>
<!-- Declare a parameter entity %SVG.xmlns.attrib; containing
all XML namespace declaration attributes used by SVG,
including a default xmlns attribute when prefixing is
inactive.
-->
<![%SVG.prefixed;[
<!ENTITY % SVG.xmlns.attrib
"%NS.decl.attrib;"
>
]]>
<!ENTITY % SVG.xmlns.attrib
"xmlns %URI.datatype; #FIXED '%SVG.xmlns;'
%XLINK.xmlns.attrib;"
>
<!-- Section B: SVG Qualified Names :::::::::::::::::::::::::::::: -->
<!-- 6. This section declares parameter entities used to provide
namespace-qualified names for all SVG element types.
-->
<!-- module: svg-structure.mod ......................... -->
<!ENTITY % SVG.svg.qname "%SVG.pfx;svg" >
<!ENTITY % SVG.g.qname "%SVG.pfx;g" >
<!ENTITY % SVG.defs.qname "%SVG.pfx;defs" >
<!ENTITY % SVG.desc.qname "%SVG.pfx;desc" >
<!ENTITY % SVG.title.qname "%SVG.pfx;title" >
<!ENTITY % SVG.metadata.qname "%SVG.pfx;metadata" >
<!ENTITY % SVG.symbol.qname "%SVG.pfx;symbol" >
<!ENTITY % SVG.use.qname "%SVG.pfx;use" >
<!-- module: svg-conditional.mod ....................... -->
<!ENTITY % SVG.switch.qname "%SVG.pfx;switch" >
<!-- module: svg-image.mod ............................. -->
<!ENTITY % SVG.image.qname "%SVG.pfx;image" >
<!-- module: svg-style.mod ............................. -->
<!ENTITY % SVG.style.qname "%SVG.pfx;style" >
<!-- module: svg-shape.mod ............................. -->
<!ENTITY % SVG.path.qname "%SVG.pfx;path" >
<!ENTITY % SVG.rect.qname "%SVG.pfx;rect" >
<!ENTITY % SVG.circle.qname "%SVG.pfx;circle" >
<!ENTITY % SVG.line.qname "%SVG.pfx;line" >
<!ENTITY % SVG.ellipse.qname "%SVG.pfx;ellipse" >
<!ENTITY % SVG.polyline.qname "%SVG.pfx;polyline" >
<!ENTITY % SVG.polygon.qname "%SVG.pfx;polygon" >
<!-- module: svg-text.mod .............................. -->
<!ENTITY % SVG.text.qname "%SVG.pfx;text" >
<!ENTITY % SVG.tspan.qname "%SVG.pfx;tspan" >
<!ENTITY % SVG.tref.qname "%SVG.pfx;tref" >
<!ENTITY % SVG.textPath.qname "%SVG.pfx;textPath" >
<!ENTITY % SVG.altGlyph.qname "%SVG.pfx;altGlyph" >
<!ENTITY % SVG.altGlyphDef.qname "%SVG.pfx;altGlyphDef" >
<!ENTITY % SVG.altGlyphItem.qname "%SVG.pfx;altGlyphItem" >
<!ENTITY % SVG.glyphRef.qname "%SVG.pfx;glyphRef" >
<!-- module: svg-marker.mod ............................ -->
<!ENTITY % SVG.marker.qname "%SVG.pfx;marker" >
<!-- module: svg-profile.mod ........................... -->
<!ENTITY % SVG.color-profile.qname "%SVG.pfx;color-profile" >
<!-- module: svg-gradient.mod .......................... -->
<!ENTITY % SVG.linearGradient.qname "%SVG.pfx;linearGradient" >
<!ENTITY % SVG.radialGradient.qname "%SVG.pfx;radialGradient" >
<!ENTITY % SVG.stop.qname "%SVG.pfx;stop" >
<!-- module: svg-pattern.mod ........................... -->
<!ENTITY % SVG.pattern.qname "%SVG.pfx;pattern" >
<!-- module: svg-clip.mod .............................. -->
<!ENTITY % SVG.clipPath.qname "%SVG.pfx;clipPath" >
<!-- module: svg-mask.mod .............................. -->
<!ENTITY % SVG.mask.qname "%SVG.pfx;mask" >
<!-- module: svg-filter.mod ............................ -->
<!ENTITY % SVG.filter.qname "%SVG.pfx;filter" >
<!ENTITY % SVG.feBlend.qname "%SVG.pfx;feBlend" >
<!ENTITY % SVG.feColorMatrix.qname "%SVG.pfx;feColorMatrix" >
<!ENTITY % SVG.feComponentTransfer.qname "%SVG.pfx;feComponentTransfer" >
<!ENTITY % SVG.feComposite.qname "%SVG.pfx;feComposite" >
<!ENTITY % SVG.feConvolveMatrix.qname "%SVG.pfx;feConvolveMatrix" >
<!ENTITY % SVG.feDiffuseLighting.qname "%SVG.pfx;feDiffuseLighting" >
<!ENTITY % SVG.feDisplacementMap.qname "%SVG.pfx;feDisplacementMap" >
<!ENTITY % SVG.feFlood.qname "%SVG.pfx;feFlood" >
<!ENTITY % SVG.feGaussianBlur.qname "%SVG.pfx;feGaussianBlur" >
<!ENTITY % SVG.feImage.qname "%SVG.pfx;feImage" >
<!ENTITY % SVG.feMerge.qname "%SVG.pfx;feMerge" >
<!ENTITY % SVG.feMergeNode.qname "%SVG.pfx;feMergeNode" >
<!ENTITY % SVG.feMorphology.qname "%SVG.pfx;feMorphology" >
<!ENTITY % SVG.feOffset.qname "%SVG.pfx;feOffset" >
<!ENTITY % SVG.feSpecularLighting.qname "%SVG.pfx;feSpecularLighting" >
<!ENTITY % SVG.feTile.qname "%SVG.pfx;feTile" >
<!ENTITY % SVG.feTurbulence.qname "%SVG.pfx;feTurbulence" >
<!ENTITY % SVG.feDistantLight.qname "%SVG.pfx;feDistantLight" >
<!ENTITY % SVG.fePointLight.qname "%SVG.pfx;fePointLight" >
<!ENTITY % SVG.feSpotLight.qname "%SVG.pfx;feSpotLight" >
<!ENTITY % SVG.feFuncR.qname "%SVG.pfx;feFuncR" >
<!ENTITY % SVG.feFuncG.qname "%SVG.pfx;feFuncG" >
<!ENTITY % SVG.feFuncB.qname "%SVG.pfx;feFuncB" >
<!ENTITY % SVG.feFuncA.qname "%SVG.pfx;feFuncA" >
<!-- module: svg-cursor.mod ............................ -->
<!ENTITY % SVG.cursor.qname "%SVG.pfx;cursor" >
<!-- module: svg-hyperlink.mod ......................... -->
<!ENTITY % SVG.a.qname "%SVG.pfx;a" >
<!-- module: svg-view.mod .............................. -->
<!ENTITY % SVG.view.qname "%SVG.pfx;view" >
<!-- module: svg-script.mod ............................ -->
<!ENTITY % SVG.script.qname "%SVG.pfx;script" >
<!-- module: svg-animation.mod ......................... -->
<!ENTITY % SVG.animate.qname "%SVG.pfx;animate" >
<!ENTITY % SVG.set.qname "%SVG.pfx;set" >
<!ENTITY % SVG.animateMotion.qname "%SVG.pfx;animateMotion" >
<!ENTITY % SVG.animateColor.qname "%SVG.pfx;animateColor" >
<!ENTITY % SVG.animateTransform.qname "%SVG.pfx;animateTransform" >
<!ENTITY % SVG.mpath.qname "%SVG.pfx;mpath" >
<!-- module: svg-font.mod .............................. -->
<!ENTITY % SVG.font.qname "%SVG.pfx;font" >
<!ENTITY % SVG.font-face.qname "%SVG.pfx;font-face" >
<!ENTITY % SVG.glyph.qname "%SVG.pfx;glyph" >
<!ENTITY % SVG.missing-glyph.qname "%SVG.pfx;missing-glyph" >
<!ENTITY % SVG.hkern.qname "%SVG.pfx;hkern" >
<!ENTITY % SVG.vkern.qname "%SVG.pfx;vkern" >
<!ENTITY % SVG.font-face-src.qname "%SVG.pfx;font-face-src" >
<!ENTITY % SVG.font-face-uri.qname "%SVG.pfx;font-face-uri" >
<!ENTITY % SVG.font-face-format.qname "%SVG.pfx;font-face-format" >
<!ENTITY % SVG.font-face-name.qname "%SVG.pfx;font-face-name" >
<!-- module: svg-extensibility.mod ..................... -->
<!ENTITY % SVG.foreignObject.qname "%SVG.pfx;foreignObject" >
<!-- end of svg-qname.mod -->
Core Attribute Module defines the attribute collection Core.attrib that is the core set of attributes that can be present on any element.
| Collection name | Attributes in collection |
|---|---|
| Core.attrib | id, xml:base, xml:lang, xml:space |
<!-- ....................................................................... -->
<!-- SVG 1.1 Core Attribute Module ......................................... -->
<!-- file: svg-core-attrib.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ENTITIES SVG 1.1 Core Attribute//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-core-attrib.mod"
....................................................................... -->
<!-- Core Attribute
id, xml:base, xml:lang, xml:space
This module defines the core set of attributes that can be present on
any element.
-->
<!ENTITY % SVG.id.attrib
"id ID #IMPLIED"
>
<!ENTITY % SVG.base.attrib
"xml:base %URI.datatype; #IMPLIED"
>
<!ENTITY % SVG.lang.attrib
"xml:lang %LanguageCode.datatype; #IMPLIED"
>
<!ENTITY % SVG.space.attrib
"xml:space ( default | preserve ) #IMPLIED"
>
<!ENTITY % SVG.Core.extra.attrib "" >
<!ENTITY % SVG.Core.attrib
"%SVG.id.attrib;
%SVG.base.attrib;
%SVG.lang.attrib;
%SVG.space.attrib;
%SVG.Core.extra.attrib;"
>
<!-- end of svg-core-attrib.mod -->
Container Attribute Module defines the Container.attrib attribute collection.
| Collection name | Attributes in collection |
|---|---|
| Container.attrib | enable-background |
<!-- ....................................................................... -->
<!-- SVG 1.1 Container Attribute Module .................................... -->
<!-- file: svg-container-attrib.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ENTITIES SVG 1.1 Container Attribute//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-container-attrib.mod"
....................................................................... -->
<!-- Container Attribute
enable-background
This module defines the Container attribute set.
-->
<!-- 'enable-background' property/attribute value (тобто, 'new', 'accumulate') -->
<!ENTITY % EnableBackgroundValue.datatype "CDATA" >
<!ENTITY % SVG.enable-background.attrib
"enable-background %EnableBackgroundValue.datatype; #IMPLIED"
>
<!ENTITY % SVG.Container.extra.attrib "" >
<!ENTITY % SVG.Container.attrib
"%SVG.enable-background.attrib;
%SVG.Container.extra.attrib;"
>
<!-- end of svg-container-attrib.mod -->
Container Attribute Module defines the Container.attrib attribute collection.
| Collection name | Attributes in collection |
|---|---|
| Viewport.attrib | clip, overflow |
<!-- ....................................................................... -->
<!-- SVG 1.1 Viewport Attribute Module ..................................... -->
<!-- file: svg-viewport-attrib.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ENTITIES SVG 1.1 Viewport Attribute//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-viewport-attrib.mod"
....................................................................... -->
<!-- Viewport Attribute
clip, overflow
This module defines the Viewport attribute set.
-->
<!-- 'clip' property/attribute value (тобто, 'auto', rect(...)) -->
<!ENTITY % ClipValue.datatype "CDATA" >
<!ENTITY % SVG.clip.attrib
"clip %ClipValue.datatype; #IMPLIED"
>
<!ENTITY % SVG.overflow.attrib
"overflow ( visible | hidden | scroll | auto | inherit ) #IMPLIED"
>
<!ENTITY % SVG.Viewport.extra.attrib "" >
<!ENTITY % SVG.Viewport.attrib
"%SVG.clip.attrib;
%SVG.overflow.attrib;
%SVG.Viewport.extra.attrib;"
>
<!-- end of svg-viewport-attrib.mod -->
Paint Attribute Module defines the Paint.attrib attribute collection.
| Collection name | Attributes in collection |
|---|---|
| Paint.attrib | color, fill, fill-rule, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-width, color-interpolation, color-rendering |
<!-- ....................................................................... -->
<!-- SVG 1.1 Paint Attribute Module ........................................ -->
<!-- file: svg-paint-attrib.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ENTITIES SVG 1.1 Paint Attribute//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-paint-attrib.mod"
....................................................................... -->
<!-- Paint Attribute
fill, fill-rule, stroke, stroke-dasharray, stroke-dashoffset,
stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-width, color,
color-interpolation, color-rendering
This module defines the Paint and Color attribute sets.
-->
<!-- a 'fill' or 'stroke' property/attribute value: <paint> -->
<!ENTITY % Paint.datatype "CDATA" >
<!-- 'stroke-dasharray' property/attribute value (тобто, 'none', list of <number>s) -->
<!ENTITY % StrokeDashArrayValue.datatype "CDATA" >
<!-- 'stroke-dashoffset' property/attribute value (тобто, 'none', <legnth>) -->
<!ENTITY % StrokeDashOffsetValue.datatype "CDATA" >
<!-- 'stroke-miterlimit' property/attribute value (тобто, <number>) -->
<!ENTITY % StrokeMiterLimitValue.datatype "CDATA" >
<!-- 'stroke-width' property/attribute value (тобто, <length>) -->
<!ENTITY % StrokeWidthValue.datatype "CDATA" >
<!ENTITY % SVG.fill.attrib
"fill %Paint.datatype; #IMPLIED"
>
<!ENTITY % SVG.fill-rule.attrib
"fill-rule %ClipFillRule.datatype; #IMPLIED"
>
<!ENTITY % SVG.stroke.attrib
"stroke %Paint.datatype; #IMPLIED"
>
<!ENTITY % SVG.stroke-dasharray.attrib
"stroke-dasharray %StrokeDashArrayValue.datatype; #IMPLIED"
>
<!ENTITY % SVG.stroke-dashoffset.attrib
"stroke-dashoffset %StrokeDashOffsetValue.datatype; #IMPLIED"
>
<!ENTITY % SVG.stroke-linecap.attrib
"stroke-linecap ( butt | round | square | inherit ) #IMPLIED"
>
<!ENTITY % SVG.stroke-linejoin.attrib
"stroke-linejoin ( miter | round | bevel | inherit ) #IMPLIED"
>
<!ENTITY % SVG.stroke-miterlimit.attrib
"stroke-miterlimit %StrokeMiterLimitValue.datatype; #IMPLIED"
>
<!ENTITY % SVG.stroke-width.attrib
"stroke-width %StrokeWidthValue.datatype; #IMPLIED"
>
<!ENTITY % SVG.Paint.extra.attrib "" >
<!ENTITY % SVG.Paint.attrib
"%SVG.fill.attrib;
%SVG.fill-rule.attrib;
%SVG.stroke.attrib;
%SVG.stroke-dasharray.attrib;
%SVG.stroke-dashoffset.attrib;
%SVG.stroke-linecap.attrib;
%SVG.stroke-linejoin.attrib;
%SVG.stroke-miterlimit.attrib;
%SVG.stroke-width.attrib;
%SVG.Paint.extra.attrib;"
>
<!ENTITY % SVG.color.attrib
"color %Color.datatype; #IMPLIED"
>
<!ENTITY % SVG.color-interpolation.attrib
"color-interpolation ( auto | sRGB | linearRGB | inherit ) #IMPLIED"
>
<!ENTITY % SVG.color-rendering.attrib
"color-rendering ( auto | optimizeSpeed | optimizeQuality | inherit )
#IMPLIED"
>
<!ENTITY % SVG.Color.extra.attrib "" >
<!ENTITY % SVG.Color.attrib
"%SVG.color.attrib;
%SVG.color-interpolation.attrib;
%SVG.color-rendering.attrib;
%SVG.Color.extra.attrib;"
>
<!-- end of svg-paint-attrib.mod -->
Basic Paint Attribute Module defines the Paint.attrib attribute collection.
| Collection name | Attributes in collection |
|---|---|
| Paint.attrib | color, fill, fill-rule, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-width, color-rendering |
<!-- ....................................................................... -->
<!-- SVG 1.1 Basic Paint Attribute Module .................................. -->
<!-- file: svg-basic-paint-attrib.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ENTITIES SVG 1.1 Basic Paint Attribute//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-basic-paint-attrib.mod"
....................................................................... -->
<!-- Basic Paint Attribute
fill, fill-rule, stroke, stroke-dasharray, stroke-dashoffset,
stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-width, color,
color-rendering
This module defines the Paint and Color attribute sets.
-->
<!-- a 'fill' or 'stroke' property/attribute value: <paint> -->
<!ENTITY % Paint.datatype "CDATA" >
<!-- 'stroke-dasharray' property/attribute value (тобто, 'none', list of <number>s) -->
<!ENTITY % StrokeDashArrayValue.datatype "CDATA" >
<!-- 'stroke-dashoffset' property/attribute value (тобто, 'none', <legnth>) -->
<!ENTITY % StrokeDashOffsetValue.datatype "CDATA" >
<!-- 'stroke-miterlimit' property/attribute value (тобто, <number>) -->
<!ENTITY % StrokeMiterLimitValue.datatype "CDATA" >
<!-- 'stroke-width' property/attribute value (тобто, <length>) -->
<!ENTITY % StrokeWidthValue.datatype "CDATA" >
<!ENTITY % SVG.fill.attrib
"fill %Paint.datatype; #IMPLIED"
>
<!ENTITY % SVG.fill-rule.attrib
"fill-rule %ClipFillRule.datatype; #IMPLIED"
>
<!ENTITY % SVG.stroke.attrib
"stroke %Paint.datatype; #IMPLIED"
>
<!ENTITY % SVG.stroke-dasharray.attrib
"stroke-dasharray %StrokeDashArrayValue.datatype; #IMPLIED"
>
<!ENTITY % SVG.stroke-dashoffset.attrib
"stroke-dashoffset %StrokeDashOffsetValue.datatype; #IMPLIED"
>
<!ENTITY % SVG.stroke-linecap.attrib
"stroke-linecap ( butt | round | square | inherit ) #IMPLIED"
>
<!ENTITY % SVG.stroke-linejoin.attrib
"stroke-linejoin ( miter | round | bevel | inherit ) #IMPLIED"
>
<!ENTITY % SVG.stroke-miterlimit.attrib
"stroke-miterlimit %StrokeMiterLimitValue.datatype; #IMPLIED"
>
<!ENTITY % SVG.stroke-width.attrib
"stroke-width %StrokeWidthValue.datatype; #IMPLIED"
>
<!ENTITY % SVG.Paint.extra.attrib "" >
<!ENTITY % SVG.Paint.attrib
"%SVG.fill.attrib;
%SVG.fill-rule.attrib;
%SVG.stroke.attrib;
%SVG.stroke-dasharray.attrib;
%SVG.stroke-dashoffset.attrib;
%SVG.stroke-linecap.attrib;
%SVG.stroke-linejoin.attrib;
%SVG.stroke-miterlimit.attrib;
%SVG.stroke-width.attrib;
%SVG.Paint.extra.attrib;"
>
<!ENTITY % SVG.color.attrib
"color %Color.datatype; #IMPLIED"
>
<!ENTITY % SVG.color-rendering.attrib
"color-rendering ( auto | optimizeSpeed | optimizeQuality | inherit )
#IMPLIED"
>
<!ENTITY % SVG.Color.extra.attrib "" >
<!ENTITY % SVG.Color.attrib
"%SVG.color.attrib;
%SVG.color-rendering.attrib;
%SVG.Color.extra.attrib;"
>
<!-- end of svg-basic-paint-attrib.mod -->
Paint Opacity Attribute Module defines the Opacity.attrib attribute collection.
| Collection name | Attributes in collection |
|---|---|
| Opacity.attrib | opacity, stroke-opacity, fill-opacity |
<!-- ....................................................................... -->
<!-- SVG 1.1 Paint Opacity Attribute Module ................................ -->
<!-- file: svg-opacity-attrib.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ENTITIES SVG 1.1 Paint Opacity Attribute//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-opacity-attrib.mod"
....................................................................... -->
<!-- Paint Opacity Attribute
opacity, fill-opacity, stroke-opacity
This module defines the Opacity attribute set.
-->
<!ENTITY % SVG.opacity.attrib
"opacity %OpacityValue.datatype; #IMPLIED"
>
<!ENTITY % SVG.fill-opacity.attrib
"fill-opacity %OpacityValue.datatype; #IMPLIED"
>
<!ENTITY % SVG.stroke-opacity.attrib
"stroke-opacity %OpacityValue.datatype; #IMPLIED"
>
<!ENTITY % SVG.Opacity.extra.attrib "" >
<!ENTITY % SVG.Opacity.attrib
"%SVG.opacity.attrib;
%SVG.fill-opacity.attrib;
%SVG.stroke-opacity.attrib;
%SVG.Opacity.extra.attrib;"
>
<!-- end of svg-opacity-attrib.mod -->
Graphics Attribute Module defines the Graphics.attrib attribute collection.
| Collection name | Attributes in collection |
|---|---|
| Graphics.attrib | display, image-rendering, pointer-events, shape-rendering, text-rendering, visibility |
<!-- ....................................................................... -->
<!-- SVG 1.1 Graphics Attribute Module ..................................... -->
<!-- file: svg-graphics-attrib.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ENTITIES SVG 1.1 Graphics Attribute//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-graphics-attrib.mod"
....................................................................... -->
<!-- Graphics Attribute
display, image-rendering, pointer-events, shape-rendering,
text-rendering, visibility
This module defines the Graphics attribute set.
-->
<!ENTITY % SVG.display.attrib
"display ( inline | block | list-item | run-in | compact | marker |
table | inline-table | table-row-group | table-header-group |
table-footer-group | table-row | table-column-group |
table-column | table-cell | table-caption | none | inherit )
#IMPLIED"
>
<!ENTITY % SVG.image-rendering.attrib
"image-rendering ( auto | optimizeSpeed | optimizeQuality | inherit )
#IMPLIED"
>
<!ENTITY % SVG.pointer-events.attrib
"pointer-events ( visiblePainted | visibleFill | visibleStroke | visible |
painted | fill | stroke | all | none | inherit )
#IMPLIED"
>
<!ENTITY % SVG.shape-rendering.attrib
"shape-rendering ( auto | optimizeSpeed | crispEdges | geometricPrecision |
inherit ) #IMPLIED"
>
<!ENTITY % SVG.text-rendering.attrib
"text-rendering ( auto | optimizeSpeed | optimizeLegibility |
geometricPrecision | inherit ) #IMPLIED"
>
<!ENTITY % SVG.visibility.attrib
"visibility ( visible | hidden | inherit ) #IMPLIED"
>
<!ENTITY % SVG.Graphics.extra.attrib "" >
<!ENTITY % SVG.Graphics.attrib
"%SVG.display.attrib;
%SVG.image-rendering.attrib;
%SVG.pointer-events.attrib;
%SVG.shape-rendering.attrib;
%SVG.text-rendering.attrib;
%SVG.visibility.attrib;
%SVG.Graphics.extra.attrib;"
>
<!-- end of svg-graphics-attrib.mod -->
Basic Graphics Attribute Module defines the Graphics.attrib attribute collection.
| Collection name | Attributes in collection |
|---|---|
| Graphics.attrib | display, visibility |
<!-- ....................................................................... -->
<!-- SVG 1.1 Basic Graphics Attribute Module ............................... -->
<!-- file: svg-basic-graphics-attrib.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ENTITIES SVG 1.1 Basic Graphics Attribute//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-basic-graphics-attrib.mod"
....................................................................... -->
<!-- Basic Graphics Attribute
display, visibility
This module defines the Graphics attribute set.
-->
<!ENTITY % SVG.display.attrib
"display ( inline | block | list-item | run-in | compact | marker |
table | inline-table | table-row-group | table-header-group |
table-footer-group | table-row | table-column-group |
table-column | table-cell | table-caption | none | inherit )
#IMPLIED"
>
<!ENTITY % SVG.visibility.attrib
"visibility ( visible | hidden | inherit ) #IMPLIED"
>
<!ENTITY % SVG.Graphics.extra.attrib "" >
<!ENTITY % SVG.Graphics.attrib
"%SVG.display.attrib;
%SVG.visibility.attrib;
%SVG.Graphics.extra.attrib;"
>
<!-- end of svg-basic-graphics-attrib.mod -->
Document Events Attribute Module defines the DocumentEvents.attrib attribute collection.
| Collection name | Attributes in collection |
|---|---|
| DocumentEvents.attrib | onunload, onabort, onerror, onresize, onscroll, onzoom |
<!-- ....................................................................... -->
<!-- SVG 1.1 Document Events Attribute Module .............................. -->
<!-- file: svg-docevents-attrib.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ENTITIES SVG 1.1 Document Events Attribute//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-docevents-attrib.mod"
....................................................................... -->
<!-- Document Events Attribute
onunload, onabort, onerror, onresize, onscroll, onzoom
This module defines the DocumentEvents attribute set.
-->
<!ENTITY % SVG.onunload.attrib
"onunload %Script.datatype; #IMPLIED"
>
<!ENTITY % SVG.onabort.attrib
"onabort %Script.datatype; #IMPLIED"
>
<!ENTITY % SVG.onerror.attrib
"onerror %Script.datatype; #IMPLIED"
>
<!ENTITY % SVG.onresize.attrib
"onresize %Script.datatype; #IMPLIED"
>
<!ENTITY % SVG.onscroll.attrib
"onscroll %Script.datatype; #IMPLIED"
>
<!ENTITY % SVG.onzoom.attrib
"onzoom %Script.datatype; #IMPLIED"
>
<!ENTITY % SVG.DocumentEvents.extra.attrib "" >
<!ENTITY % SVG.DocumentEvents.attrib
"%SVG.onunload.attrib;
%SVG.onabort.attrib;
%SVG.onerror.attrib;
%SVG.onresize.attrib;
%SVG.onscroll.attrib;
%SVG.onzoom.attrib;
%SVG.DocumentEvents.extra.attrib;"
>
<!-- end of svg-docevents-attrib.mod -->
Graphical Events Attribute Module defines the GraphicalEvents.attrib attribute collection.
| Collection name | Attributes in collection |
|---|---|
| GraphicalEvents.attrib | onfocusin, onfocusout, onactivate, onclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onload |
<!-- ....................................................................... -->
<!-- SVG 1.1 Graphical Element Events Attribute Module ..................... -->
<!-- file: svg-graphevents-attrib.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ENTITIES SVG 1.1 Graphical Element Events Attribute//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-graphevents-attrib.mod"
....................................................................... -->
<!-- Graphical Element Events Attribute
onfocusin, onfocusout, onactivate, onclick, onmousedown, onmouseup,
onmouseover, onmousemove, onmouseout, onload
This module defines the GraphicalEvents attribute set.
-->
<!ENTITY % SVG.onfocusin.attrib
"onfocusin %Script.datatype; #IMPLIED"
>
<!ENTITY % SVG.onfocusout.attrib
"onfocusout %Script.datatype; #IMPLIED"
>
<!ENTITY % SVG.onactivate.attrib
"onactivate %Script.datatype; #IMPLIED"
>
<!ENTITY % SVG.onclick.attrib
"onclick %Script.datatype; #IMPLIED"
>
<!ENTITY % SVG.onmousedown.attrib
"onmousedown %Script.datatype; #IMPLIED"
>
<!ENTITY % SVG.onmouseup.attrib
"onmouseup %Script.datatype; #IMPLIED"
>
<!ENTITY % SVG.onmouseover.attrib
"onmouseover %Script.datatype; #IMPLIED"
>
<!ENTITY % SVG.onmousemove.attrib
"onmousemove %Script.datatype; #IMPLIED"
>
<!ENTITY % SVG.onmouseout.attrib
"onmouseout %Script.datatype; #IMPLIED"
>
<!ENTITY % SVG.onload.attrib
"onload %Script.datatype; #IMPLIED"
>
<!ENTITY % SVG.GraphicalEvents.extra.attrib "" >
<!ENTITY % SVG.GraphicalEvents.attrib
"%SVG.onfocusin.attrib;
%SVG.onfocusout.attrib;
%SVG.onactivate.attrib;
%SVG.onclick.attrib;
%SVG.onmousedown.attrib;
%SVG.onmouseup.attrib;
%SVG.onmouseover.attrib;
%SVG.onmousemove.attrib;
%SVG.onmouseout.attrib;
%SVG.onload.attrib;
%SVG.GraphicalEvents.extra.attrib;"
>
<!-- end of svg-graphevents-attrib.mod -->
Animation Events Attribute Module defines the AnimationEvents.attrib attribute collection.
| Collection name | Attributes in collection |
|---|---|
| AnimationEvents.attrib | onbegin, onend, onrepeat, onload |
<!-- ....................................................................... -->
<!-- SVG 1.1 Animation Events Attribute Module ............................. -->
<!-- file: svg-animevents-attrib.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ENTITIES SVG 1.1 Animation Events Attribute//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-animevents-attrib.mod"
....................................................................... -->
<!-- Animation Events Attribute
onbegin, onend, onrepeat, onload
This module defines the AnimationEvents attribute set.
-->
<!ENTITY % SVG.onbegin.attrib
"onbegin %Script.datatype; #IMPLIED"
>
<!ENTITY % SVG.onend.attrib
"onend %Script.datatype; #IMPLIED"
>
<!ENTITY % SVG.onrepeat.attrib
"onrepeat %Script.datatype; #IMPLIED"
>
<!ENTITY % SVG.onload.attrib
"onload %Script.datatype; #IMPLIED"
>
<!ENTITY % SVG.AnimationEvents.extra.attrib "" >
<!ENTITY % SVG.AnimationEvents.attrib
"%SVG.onbegin.attrib;
%SVG.onend.attrib;
%SVG.onrepeat.attrib;
%SVG.onload.attrib;
%SVG.AnimationEvents.extra.attrib;"
>
<!-- end of svg-animevents-attrib.mod -->
XLink Attribute Module defines the XLink.attrib, XLinkRequired.attrib, XLinkEmbed.attrib and XLinkReplace.attrib attribute collections. These collections differ only in whether the ‘xlink:href’ attribute is required or what the default value for the ‘xlink:show’ attribute is.
| Collection name | Attributes in collection |
|---|---|
| XLink.attrib | xlink:type, xlink:href, xlink:role, xlink:arcrole, xlink:title, xlink:show, xlink:actuate |
| XLinkRequired.attrib | xlink:type, xlink:href, xlink:role, xlink:arcrole, xlink:title, xlink:show, xlink:actuate |
| XLinkEmbed.attrib | xlink:type, xlink:href, xlink:role, xlink:arcrole, xlink:title, xlink:show, xlink:actuate |
| XLinkReplace.attrib | xlink:type, xlink:href, xlink:role, xlink:arcrole, xlink:title, xlink:show, xlink:actuate |
<!-- ....................................................................... -->
<!-- SVG 1.1 XLink Attribute Module ........................................ -->
<!-- file: svg-xlink-attrib.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ENTITIES SVG 1.1 XLink Attribute//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-xlink-attrib.mod"
....................................................................... -->
<!-- XLink Attribute
type, href, role, arcrole, title, show, actuate
This module defines the XLink, XLinkRequired, XLinkEmbed, and
XLinkReplace attribute set.
-->
<!ENTITY % SVG.XLink.extra.attrib "" >
<!ENTITY % SVG.XLink.attrib
"%XLINK.xmlns.attrib;
%XLINK.pfx;type ( simple ) #FIXED 'simple'
%XLINK.pfx;href %URI.datatype; #IMPLIED
%XLINK.pfx;role %URI.datatype; #IMPLIED
%XLINK.pfx;arcrole %URI.datatype; #IMPLIED
%XLINK.pfx;title CDATA #IMPLIED
%XLINK.pfx;show ( other ) 'other'
%XLINK.pfx;actuate ( onLoad ) #FIXED 'onLoad'
%SVG.XLink.extra.attrib;"
>
<!ENTITY % SVG.XLinkRequired.extra.attrib "" >
<!ENTITY % SVG.XLinkRequired.attrib
"%XLINK.xmlns.attrib;
%XLINK.pfx;type ( simple ) #FIXED 'simple'
%XLINK.pfx;href %URI.datatype; #REQUIRED
%XLINK.pfx;role %URI.datatype; #IMPLIED
%XLINK.pfx;arcrole %URI.datatype; #IMPLIED
%XLINK.pfx;title CDATA #IMPLIED
%XLINK.pfx;show ( other ) 'other'
%XLINK.pfx;actuate ( onLoad ) #FIXED 'onLoad'
%SVG.XLinkRequired.extra.attrib;"
>
<!ENTITY % SVG.XLinkEmbed.extra.attrib "" >
<!ENTITY % SVG.XLinkEmbed.attrib
"%XLINK.xmlns.attrib;
%XLINK.pfx;type ( simple ) #FIXED 'simple'
%XLINK.pfx;href %URI.datatype; #REQUIRED
%XLINK.pfx;role %URI.datatype; #IMPLIED
%XLINK.pfx;arcrole %URI.datatype; #IMPLIED
%XLINK.pfx;title CDATA #IMPLIED
%XLINK.pfx;show ( embed ) 'embed'
%XLINK.pfx;actuate ( onLoad ) #FIXED 'onLoad'
%SVG.XLinkEmbed.extra.attrib;"
>
<!ENTITY % SVG.XLinkReplace.extra.attrib "" >
<!ENTITY % SVG.XLinkReplace.attrib
"%XLINK.xmlns.attrib;
%XLINK.pfx;type ( simple ) #FIXED 'simple'
%XLINK.pfx;href %URI.datatype; #REQUIRED
%XLINK.pfx;role %URI.datatype; #IMPLIED
%XLINK.pfx;arcrole %URI.datatype; #IMPLIED
%XLINK.pfx;title CDATA #IMPLIED
%XLINK.pfx;show ( new | replace ) 'replace'
%XLINK.pfx;actuate ( onRequest ) #FIXED 'onRequest'
%SVG.XLinkReplace.extra.attrib;"
>
<!-- end of svg-xlink-attrib.mod -->
External Resources Attribute Module defines the External.attrib attribute collection.
| Collection name | Attributes in collection |
|---|---|
| External.attrib | externalResourcesRequired |
<!-- ....................................................................... -->
<!-- SVG 1.1 External Resources Attribute Module ........................... -->
<!-- file: svg-extresources-attrib.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ENTITIES SVG 1.1 External Resources Attribute//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-extresources-attrib.mod"
....................................................................... -->
<!-- External Resources Attribute
externalResourcesRequired
This module defines the External attribute set.
-->
<!ENTITY % SVG.externalResourcesRequired.attrib
"externalResourcesRequired %Boolean.datatype; #IMPLIED"
>
<!ENTITY % SVG.External.extra.attrib "" >
<!ENTITY % SVG.External.attrib
"%SVG.externalResourcesRequired.attrib;
%SVG.External.extra.attrib;"
>
<!-- end of svg-extresources-attrib.mod -->
Structure Module defines the Description.class, Structure.class and Use.class element collections.
| Collection name | Elements in collection |
|---|---|
| Description.class | desc, title, metadata |
| Use.class | use |
| Structure.class | svg, g, defs, symbol, Use.class |
<!-- ....................................................................... -->
<!-- SVG 1.1 Structure Module .............................................. -->
<!-- file: svg-structure.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Structure//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-structure.mod"
....................................................................... -->
<!-- Structure
svg, g, defs, desc, title, metadata, symbol, use
This module declares the major структурний елементи and their attributes.
-->
<!-- Qualified Names (Default) ......................... -->
<!ENTITY % SVG.svg.qname "svg" >
<!ENTITY % SVG.g.qname "g" >
<!ENTITY % SVG.defs.qname "defs" >
<!ENTITY % SVG.desc.qname "desc" >
<!ENTITY % SVG.title.qname "title" >
<!ENTITY % SVG.metadata.qname "metadata" >
<!ENTITY % SVG.symbol.qname "symbol" >
<!ENTITY % SVG.use.qname "use" >
<!-- Attribute Collections (Default) ................... -->
<!ENTITY % SVG.Core.attrib "" >
<!ENTITY % SVG.Container.attrib "" >
<!ENTITY % SVG.Conditional.attrib "" >
<!ENTITY % SVG.Style.attrib "" >
<!ENTITY % SVG.Viewport.attrib "" >
<!ENTITY % SVG.Text.attrib "" >
<!ENTITY % SVG.TextContent.attrib "" >
<!ENTITY % SVG.Font.attrib "" >
<!ENTITY % SVG.Paint.attrib "" >
<!ENTITY % SVG.Color.attrib "" >
<!ENTITY % SVG.Opacity.attrib "" >
<!ENTITY % SVG.Graphics.attrib "" >
<!ENTITY % SVG.Marker.attrib "" >
<!ENTITY % SVG.ColorProfile.attrib "" >
<!ENTITY % SVG.Gradient.attrib "" >
<!ENTITY % SVG.Clip.attrib "" >
<!ENTITY % SVG.Mask.attrib "" >
<!ENTITY % SVG.Filter.attrib "" >
<!ENTITY % SVG.FilterColor.attrib "" >
<!ENTITY % SVG.DocumentEvents.attrib "" >
<!ENTITY % SVG.GraphicalEvents.attrib "" >
<!ENTITY % SVG.Cursor.attrib "" >
<!ENTITY % SVG.XLinkEmbed.attrib "" >
<!ENTITY % SVG.External.attrib "" >
<!-- SVG.Description.class ............................. -->
<!ENTITY % SVG.Description.extra.class "" >
<!ENTITY % SVG.Description.class
"%SVG.desc.qname; | %SVG.title.qname; | %SVG.metadata.qname;
%SVG.Description.extra.class;"
>
<!-- SVG.Use.class ..................................... -->
<!ENTITY % SVG.Use.extra.class "" >
<!ENTITY % SVG.Use.class
"| %SVG.use.qname; %SVG.Use.extra.class;"
>
<!-- SVG.Structure.class ............................... -->
<!ENTITY % SVG.Structure.extra.class "" >
<!ENTITY % SVG.Structure.class
"| %SVG.svg.qname; | %SVG.g.qname; | %SVG.defs.qname; | %SVG.symbol.qname;
%SVG.Use.class; %SVG.Structure.extra.class;"
>
<!-- SVG.Presentation.attrib ........................... -->
<!ENTITY % SVG.Presentation.extra.attrib "" >
<!ENTITY % SVG.Presentation.attrib
"%SVG.Container.attrib;
%SVG.Viewport.attrib;
%SVG.Text.attrib;
%SVG.TextContent.attrib;
%SVG.Font.attrib;
%SVG.Paint.attrib;
%SVG.Color.attrib;
%SVG.Opacity.attrib;
%SVG.Graphics.attrib;
%SVG.Marker.attrib;
%SVG.ColorProfile.attrib;
%SVG.Gradient.attrib;
%SVG.Clip.attrib;
%SVG.Mask.attrib;
%SVG.Filter.attrib;
%SVG.FilterColor.attrib;
%SVG.Cursor.attrib;
flood-color %SVGColor.datatype; #IMPLIED
flood-opacity %OpacityValue.datatype; #IMPLIED
lighting-color %SVGColor.datatype; #IMPLIED
%SVG.Presentation.extra.attrib;"
>
<!-- svg: SVG Document Element ......................... -->
<!ENTITY % SVG.svg.extra.content "" >
<!ENTITY % SVG.svg.element "INCLUDE" >
<![%SVG.svg.element;[
<!ENTITY % SVG.svg.content
"( %SVG.Description.class; | %SVG.Animation.class; %SVG.Structure.class;
%SVG.Conditional.class; %SVG.Image.class; %SVG.Style.class;
%SVG.Shape.class; %SVG.Text.class; %SVG.Marker.class;
%SVG.ColorProfile.class; %SVG.Gradient.class; %SVG.Pattern.class;
%SVG.Clip.class; %SVG.Mask.class; %SVG.Filter.class; %SVG.Cursor.class;
%SVG.Hyperlink.class; %SVG.View.class; %SVG.Script.class;
%SVG.Font.class; %SVG.Extensibility.class; %SVG.svg.extra.content; )*"
>
<!ELEMENT %SVG.svg.qname; %SVG.svg.content; >
<!-- end of SVG.svg.element -->]]>
<!ENTITY % SVG.svg.attlist "INCLUDE" >
<![%SVG.svg.attlist;[
<!ATTLIST %SVG.svg.qname;
%SVG.xmlns.attrib;
%SVG.Core.attrib;
%SVG.Conditional.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.DocumentEvents.attrib;
%SVG.GraphicalEvents.attrib;
%SVG.External.attrib;
x %Coordinate.datatype; #IMPLIED
y %Coordinate.datatype; #IMPLIED
width %Length.datatype; #IMPLIED
height %Length.datatype; #IMPLIED
viewBox %ViewBoxSpec.datatype; #IMPLIED
preserveAspectRatio %PreserveAspectRatioSpec.datatype; 'xMidYMid meet'
zoomAndPan ( disable | magnify ) 'magnify'
version %Number.datatype; #FIXED '1.1'
baseProfile %Text.datatype; #IMPLIED
contentScriptType %ContentType.datatype; 'application/ecmascript'
contentStyleType %ContentType.datatype; 'text/css'
>
<!-- end of SVG.svg.attlist -->]]>
<!-- g: Group Element .................................. -->
<!ENTITY % SVG.g.extra.content "" >
<!ENTITY % SVG.g.element "INCLUDE" >
<![%SVG.g.element;[
<!ENTITY % SVG.g.content
"( %SVG.Description.class; | %SVG.Animation.class; %SVG.Structure.class;
%SVG.Conditional.class; %SVG.Image.class; %SVG.Style.class;
%SVG.Shape.class; %SVG.Text.class; %SVG.Marker.class;
%SVG.ColorProfile.class; %SVG.Gradient.class; %SVG.Pattern.class;
%SVG.Clip.class; %SVG.Mask.class; %SVG.Filter.class; %SVG.Cursor.class;
%SVG.Hyperlink.class; %SVG.View.class; %SVG.Script.class;
%SVG.Font.class; %SVG.Extensibility.class; %SVG.g.extra.content; )*"
>
<!ELEMENT %SVG.g.qname; %SVG.g.content; >
<!-- end of SVG.g.element -->]]>
<!ENTITY % SVG.g.attlist "INCLUDE" >
<![%SVG.g.attlist;[
<!ATTLIST %SVG.g.qname;
%SVG.Core.attrib;
%SVG.Conditional.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.GraphicalEvents.attrib;
%SVG.External.attrib;
transform %TransformList.datatype; #IMPLIED
>
<!-- end of SVG.g.attlist -->]]>
<!-- defs: Definisions Element ......................... -->
<!ENTITY % SVG.defs.extra.content "" >
<!ENTITY % SVG.defs.element "INCLUDE" >
<![%SVG.defs.element;[
<!ENTITY % SVG.defs.content
"( %SVG.Description.class; | %SVG.Animation.class; %SVG.Structure.class;
%SVG.Conditional.class; %SVG.Image.class; %SVG.Style.class;
%SVG.Shape.class; %SVG.Text.class; %SVG.Marker.class;
%SVG.ColorProfile.class; %SVG.Gradient.class; %SVG.Pattern.class;
%SVG.Clip.class; %SVG.Mask.class; %SVG.Filter.class; %SVG.Cursor.class;
%SVG.Hyperlink.class; %SVG.View.class; %SVG.Script.class;
%SVG.Font.class; %SVG.Extensibility.class; %SVG.defs.extra.content; )*"
>
<!ELEMENT %SVG.defs.qname; %SVG.defs.content; >
<!-- end of SVG.defs.element -->]]>
<!ENTITY % SVG.defs.attlist "INCLUDE" >
<![%SVG.defs.attlist;[
<!ATTLIST %SVG.defs.qname;
%SVG.Core.attrib;
%SVG.Conditional.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.GraphicalEvents.attrib;
%SVG.External.attrib;
transform %TransformList.datatype; #IMPLIED
>
<!-- end of SVG.defs.attlist -->]]>
<!-- desc: Description Element ......................... -->
<!ENTITY % SVG.desc.extra.content "" >
<!ENTITY % SVG.desc.element "INCLUDE" >
<![%SVG.desc.element;[
<!ENTITY % SVG.desc.content
"( #PCDATA %SVG.desc.extra.content; )*"
>
<!ELEMENT %SVG.desc.qname; %SVG.desc.content; >
<!-- end of SVG.desc.element -->]]>
<!ENTITY % SVG.desc.attlist "INCLUDE" >
<![%SVG.desc.attlist;[
<!ATTLIST %SVG.desc.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
>
<!-- end of SVG.desc.attlist -->]]>
<!-- title: Title Element .............................. -->
<!ENTITY % SVG.title.extra.content "" >
<!ENTITY % SVG.title.element "INCLUDE" >
<![%SVG.title.element;[
<!ENTITY % SVG.title.content
"( #PCDATA %SVG.title.extra.content; )*"
>
<!ELEMENT %SVG.title.qname; %SVG.title.content; >
<!-- end of SVG.title.element -->]]>
<!ENTITY % SVG.title.attlist "INCLUDE" >
<![%SVG.title.attlist;[
<!ATTLIST %SVG.title.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
>
<!-- end of SVG.title.attlist -->]]>
<!-- metadata: Metadata Element ........................ -->
<!ENTITY % SVG.metadata.extra.content "" >
<!ENTITY % SVG.metadata.element "INCLUDE" >
<![%SVG.metadata.element;[
<!ENTITY % SVG.metadata.content
"( #PCDATA %SVG.metadata.extra.content; )*"
>
<!ELEMENT %SVG.metadata.qname; %SVG.metadata.content; >
<!-- end of SVG.metadata.element -->]]>
<!ENTITY % SVG.metadata.attlist "INCLUDE" >
<![%SVG.metadata.attlist;[
<!ATTLIST %SVG.metadata.qname;
%SVG.Core.attrib;
>
<!-- end of SVG.metadata.attlist -->]]>
<!-- symbol: Symbol Element ............................ -->
<!ENTITY % SVG.symbol.extra.content "" >
<!ENTITY % SVG.symbol.element "INCLUDE" >
<![%SVG.symbol.element;[
<!ENTITY % SVG.symbol.content
"( %SVG.Description.class; | %SVG.Animation.class; %SVG.Structure.class;
%SVG.Conditional.class; %SVG.Image.class; %SVG.Style.class;
%SVG.Shape.class; %SVG.Text.class; %SVG.Marker.class;
%SVG.ColorProfile.class; %SVG.Gradient.class; %SVG.Pattern.class;
%SVG.Clip.class; %SVG.Mask.class; %SVG.Filter.class; %SVG.Cursor.class;
%SVG.Hyperlink.class; %SVG.View.class; %SVG.Script.class;
%SVG.Font.class; %SVG.Extensibility.class; %SVG.symbol.extra.content; )*"
>
<!ELEMENT %SVG.symbol.qname; %SVG.symbol.content; >
<!-- end of SVG.symbol.element -->]]>
<!ENTITY % SVG.symbol.attlist "INCLUDE" >
<![%SVG.symbol.attlist;[
<!ATTLIST %SVG.symbol.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.GraphicalEvents.attrib;
%SVG.External.attrib;
viewBox %ViewBoxSpec.datatype; #IMPLIED
preserveAspectRatio %PreserveAspectRatioSpec.datatype; 'xMidYMid meet'
>
<!-- end of SVG.symbol.attlist -->]]>
<!-- use: Use Element .................................. -->
<!ENTITY % SVG.use.extra.content "" >
<!ENTITY % SVG.use.element "INCLUDE" >
<![%SVG.use.element;[
<!ENTITY % SVG.use.content
"( %SVG.Description.class; | %SVG.Animation.class;
%SVG.use.extra.content; )*"
>
<!ELEMENT %SVG.use.qname; %SVG.use.content; >
<!-- end of SVG.use.element -->]]>
<!ENTITY % SVG.use.attlist "INCLUDE" >
<![%SVG.use.attlist;[
<!ATTLIST %SVG.use.qname;
%SVG.Core.attrib;
%SVG.Conditional.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.GraphicalEvents.attrib;
%SVG.XLinkEmbed.attrib;
%SVG.External.attrib;
x %Coordinate.datatype; #IMPLIED
y %Coordinate.datatype; #IMPLIED
width %Length.datatype; #IMPLIED
height %Length.datatype; #IMPLIED
transform %TransformList.datatype; #IMPLIED
>
<!-- end of SVG.use.attlist -->]]>
<!-- end of svg-structure.mod -->
Basic Structure Module defines the Description.class, Structure.class and Use.class element collections.
| Collection name | Elements in collection |
|---|---|
| Description.class | desc, title, metadata |
| Use.class | use |
| Structure.class | svg, g, defs, Use.class |
<!-- ....................................................................... -->
<!-- SVG 1.1 Basic Structure Module ........................................ -->
<!-- file: svg-basic-structure.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Basic Structure//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-basic-structure.mod"
....................................................................... -->
<!-- Basic Structure
svg, g, defs, desc, title, metadata, use
This module declares the major структурний елементи and their attributes.
-->
<!-- Qualified Names (Default) ......................... -->
<!ENTITY % SVG.svg.qname "svg" >
<!ENTITY % SVG.g.qname "g" >
<!ENTITY % SVG.defs.qname "defs" >
<!ENTITY % SVG.desc.qname "desc" >
<!ENTITY % SVG.title.qname "title" >
<!ENTITY % SVG.metadata.qname "metadata" >
<!ENTITY % SVG.use.qname "use" >
<!-- Attribute Collections (Default) ................... -->
<!ENTITY % SVG.Core.attrib "" >
<!ENTITY % SVG.Container.attrib "" >
<!ENTITY % SVG.Conditional.attrib "" >
<!ENTITY % SVG.Style.attrib "" >
<!ENTITY % SVG.Viewport.attrib "" >
<!ENTITY % SVG.Text.attrib "" >
<!ENTITY % SVG.TextContent.attrib "" >
<!ENTITY % SVG.Font.attrib "" >
<!ENTITY % SVG.Paint.attrib "" >
<!ENTITY % SVG.Color.attrib "" >
<!ENTITY % SVG.Opacity.attrib "" >
<!ENTITY % SVG.Graphics.attrib "" >
<!ENTITY % SVG.Marker.attrib "" >
<!ENTITY % SVG.ColorProfile.attrib "" >
<!ENTITY % SVG.Gradient.attrib "" >
<!ENTITY % SVG.Clip.attrib "" >
<!ENTITY % SVG.Mask.attrib "" >
<!ENTITY % SVG.Filter.attrib "" >
<!ENTITY % SVG.FilterColor.attrib "" >
<!ENTITY % SVG.DocumentEvents.attrib "" >
<!ENTITY % SVG.GraphicalEvents.attrib "" >
<!ENTITY % SVG.Cursor.attrib "" >
<!ENTITY % SVG.XLinkEmbed.attrib "" >
<!ENTITY % SVG.External.attrib "" >
<!-- SVG.Description.class ............................. -->
<!ENTITY % SVG.Description.extra.class "" >
<!ENTITY % SVG.Description.class
"%SVG.desc.qname; | %SVG.title.qname; | %SVG.metadata.qname;
%SVG.Description.extra.class;"
>
<!-- SVG.Use.class ..................................... -->
<!ENTITY % SVG.Use.extra.class "" >
<!ENTITY % SVG.Use.class
"| %SVG.use.qname; %SVG.Use.extra.class;"
>
<!-- SVG.Structure.class ............................... -->
<!ENTITY % SVG.Structure.extra.class "" >
<!ENTITY % SVG.Structure.class
"| %SVG.g.qname; | %SVG.defs.qname; %SVG.Use.class;
%SVG.Structure.extra.class;"
>
<!-- SVG.Presentation.attrib ........................... -->
<!ENTITY % SVG.Presentation.extra.attrib "" >
<!ENTITY % SVG.Presentation.attrib
"%SVG.Container.attrib;
%SVG.Viewport.attrib;
%SVG.Text.attrib;
%SVG.TextContent.attrib;
%SVG.Font.attrib;
%SVG.Paint.attrib;
%SVG.Color.attrib;
%SVG.Opacity.attrib;
%SVG.Graphics.attrib;
%SVG.Marker.attrib;
%SVG.ColorProfile.attrib;
%SVG.Gradient.attrib;
%SVG.Clip.attrib;
%SVG.Mask.attrib;
%SVG.Filter.attrib;
%SVG.FilterColor.attrib;
%SVG.Cursor.attrib;
flood-color %SVGColor.datatype; #IMPLIED
flood-opacity %OpacityValue.datatype; #IMPLIED
lighting-color %SVGColor.datatype; #IMPLIED
%SVG.Presentation.extra.attrib;"
>
<!-- svg: SVG Document Element ......................... -->
<!ENTITY % SVG.svg.extra.content "" >
<!ENTITY % SVG.svg.element "INCLUDE" >
<![%SVG.svg.element;[
<!ENTITY % SVG.svg.content
"( %SVG.Description.class; | %SVG.Animation.class; %SVG.Structure.class;
%SVG.Conditional.class; %SVG.Image.class; %SVG.Style.class;
%SVG.Shape.class; %SVG.Text.class; %SVG.Marker.class;
%SVG.ColorProfile.class; %SVG.Gradient.class; %SVG.Pattern.class;
%SVG.Clip.class; %SVG.Mask.class; %SVG.Filter.class; %SVG.Cursor.class;
%SVG.Hyperlink.class; %SVG.View.class; %SVG.Script.class;
%SVG.Font.class; %SVG.Extensibility.class; %SVG.svg.extra.content; )*"
>
<!ELEMENT %SVG.svg.qname; %SVG.svg.content; >
<!-- end of SVG.svg.element -->]]>
<!ENTITY % SVG.svg.attlist "INCLUDE" >
<![%SVG.svg.attlist;[
<!ATTLIST %SVG.svg.qname;
%SVG.xmlns.attrib;
%SVG.Core.attrib;
%SVG.Conditional.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.DocumentEvents.attrib;
%SVG.GraphicalEvents.attrib;
%SVG.External.attrib;
x %Coordinate.datatype; #IMPLIED
y %Coordinate.datatype; #IMPLIED
width %Length.datatype; #IMPLIED
height %Length.datatype; #IMPLIED
viewBox %ViewBoxSpec.datatype; #IMPLIED
preserveAspectRatio %PreserveAspectRatioSpec.datatype; 'xMidYMid meet'
zoomAndPan ( disable | magnify ) 'magnify'
version %Number.datatype; #FIXED '1.1'
baseProfile %Text.datatype; #IMPLIED
>
<!-- end of SVG.svg.attlist -->]]>
<!-- g: Group Element .................................. -->
<!ENTITY % SVG.g.extra.content "" >
<!ENTITY % SVG.g.element "INCLUDE" >
<![%SVG.g.element;[
<!ENTITY % SVG.g.content
"( %SVG.Description.class; | %SVG.Animation.class; %SVG.Structure.class;
%SVG.Conditional.class; %SVG.Image.class; %SVG.Style.class;
%SVG.Shape.class; %SVG.Text.class; %SVG.Marker.class;
%SVG.ColorProfile.class; %SVG.Gradient.class; %SVG.Pattern.class;
%SVG.Clip.class; %SVG.Mask.class; %SVG.Filter.class; %SVG.Cursor.class;
%SVG.Hyperlink.class; %SVG.View.class; %SVG.Script.class;
%SVG.Font.class; %SVG.Extensibility.class; %SVG.g.extra.content; )*"
>
<!ELEMENT %SVG.g.qname; %SVG.g.content; >
<!-- end of SVG.g.element -->]]>
<!ENTITY % SVG.g.attlist "INCLUDE" >
<![%SVG.g.attlist;[
<!ATTLIST %SVG.g.qname;
%SVG.Core.attrib;
%SVG.Conditional.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.GraphicalEvents.attrib;
%SVG.External.attrib;
transform %TransformList.datatype; #IMPLIED
>
<!-- end of SVG.g.attlist -->]]>
<!-- defs: Definisions Element ......................... -->
<!ENTITY % SVG.defs.extra.content "" >
<!ENTITY % SVG.defs.element "INCLUDE" >
<![%SVG.defs.element;[
<!ENTITY % SVG.defs.content
"( %SVG.Description.class; | %SVG.Animation.class; %SVG.Structure.class;
%SVG.Conditional.class; %SVG.Image.class; %SVG.Style.class;
%SVG.Shape.class; %SVG.Text.class; %SVG.Marker.class;
%SVG.ColorProfile.class; %SVG.Gradient.class; %SVG.Pattern.class;
%SVG.Clip.class; %SVG.Mask.class; %SVG.Filter.class; %SVG.Cursor.class;
%SVG.Hyperlink.class; %SVG.View.class; %SVG.Script.class;
%SVG.Font.class; %SVG.Extensibility.class; %SVG.defs.extra.content; )*"
>
<!ELEMENT %SVG.defs.qname; %SVG.defs.content; >
<!-- end of SVG.defs.element -->]]>
<!ENTITY % SVG.defs.attlist "INCLUDE" >
<![%SVG.defs.attlist;[
<!ATTLIST %SVG.defs.qname;
%SVG.Core.attrib;
%SVG.Conditional.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.GraphicalEvents.attrib;
%SVG.External.attrib;
transform %TransformList.datatype; #IMPLIED
>
<!-- end of SVG.defs.attlist -->]]>
<!-- desc: Description Element ......................... -->
<!ENTITY % SVG.desc.extra.content "" >
<!ENTITY % SVG.desc.element "INCLUDE" >
<![%SVG.desc.element;[
<!ENTITY % SVG.desc.content
"( #PCDATA %SVG.desc.extra.content; )*"
>
<!ELEMENT %SVG.desc.qname; %SVG.desc.content; >
<!-- end of SVG.desc.element -->]]>
<!ENTITY % SVG.desc.attlist "INCLUDE" >
<![%SVG.desc.attlist;[
<!ATTLIST %SVG.desc.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
>
<!-- end of SVG.desc.attlist -->]]>
<!-- title: Title Element .............................. -->
<!ENTITY % SVG.title.extra.content "" >
<!ENTITY % SVG.title.element "INCLUDE" >
<![%SVG.title.element;[
<!ENTITY % SVG.title.content
"( #PCDATA %SVG.title.extra.content; )*"
>
<!ELEMENT %SVG.title.qname; %SVG.title.content; >
<!-- end of SVG.title.element -->]]>
<!ENTITY % SVG.title.attlist "INCLUDE" >
<![%SVG.title.attlist;[
<!ATTLIST %SVG.title.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
>
<!-- end of SVG.title.attlist -->]]>
<!-- metadata: Metadata Element ........................ -->
<!ENTITY % SVG.metadata.extra.content "" >
<!ENTITY % SVG.metadata.element "INCLUDE" >
<![%SVG.metadata.element;[
<!ENTITY % SVG.metadata.content
"( #PCDATA %SVG.metadata.extra.content; )*"
>
<!ELEMENT %SVG.metadata.qname; %SVG.metadata.content; >
<!-- end of SVG.metadata.element -->]]>
<!ENTITY % SVG.metadata.attlist "INCLUDE" >
<![%SVG.metadata.attlist;[
<!ATTLIST %SVG.metadata.qname;
%SVG.Core.attrib;
>
<!-- end of SVG.metadata.attlist -->]]>
<!-- use: Use Element .................................. -->
<!ENTITY % SVG.use.extra.content "" >
<!ENTITY % SVG.use.element "INCLUDE" >
<![%SVG.use.element;[
<!ENTITY % SVG.use.content
"( %SVG.Description.class; | %SVG.Animation.class;
%SVG.use.extra.content; )*"
>
<!ELEMENT %SVG.use.qname; %SVG.use.content; >
<!-- end of SVG.use.element -->]]>
<!ENTITY % SVG.use.attlist "INCLUDE" >
<![%SVG.use.attlist;[
<!ATTLIST %SVG.use.qname;
%SVG.Core.attrib;
%SVG.Conditional.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.GraphicalEvents.attrib;
%SVG.XLinkEmbed.attrib;
%SVG.External.attrib;
x %Coordinate.datatype; #IMPLIED
y %Coordinate.datatype; #IMPLIED
width %Length.datatype; #IMPLIED
height %Length.datatype; #IMPLIED
transform %TransformList.datatype; #IMPLIED
>
<!-- end of SVG.use.attlist -->]]>
<!-- end of svg-basic-structure.mod -->
Conditional Processing Module defines the Conditional.class element collection and the Conditional.attrib attribute collection.
| Collection name | Elements in collection |
|---|---|
| Conditional.class | switch |
| Collection name | Attributes in collection |
|---|---|
| Conditional.attrib | requiredFeatures, requiredExtensions, systemLanguage |
<!-- ....................................................................... -->
<!-- SVG 1.1 Conditional Processing Module ................................. -->
<!-- file: svg-conditional.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Conditional Processing//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-conditional.mod"
....................................................................... -->
<!-- Conditional Processing
switch
This module declares markup to provide support for conditional processing.
-->
<!-- extension list specification -->
<!ENTITY % ExtensionList.datatype "CDATA" >
<!-- feature list specification -->
<!ENTITY % FeatureList.datatype "CDATA" >
<!-- Qualified Names (Default) ......................... -->
<!ENTITY % SVG.switch.qname "switch" >
<!-- Attribute Collections (Default) ................... -->
<!ENTITY % SVG.Core.attrib "" >
<!ENTITY % SVG.Container.attrib "" >
<!ENTITY % SVG.Style.attrib "" >
<!ENTITY % SVG.Viewport.attrib "" >
<!ENTITY % SVG.Text.attrib "" >
<!ENTITY % SVG.TextContent.attrib "" >
<!ENTITY % SVG.Font.attrib "" >
<!ENTITY % SVG.Paint.attrib "" >
<!ENTITY % SVG.Color.attrib "" >
<!ENTITY % SVG.Opacity.attrib "" >
<!ENTITY % SVG.Graphics.attrib "" >
<!ENTITY % SVG.Marker.attrib "" >
<!ENTITY % SVG.ColorProfile.attrib "" >
<!ENTITY % SVG.Gradient.attrib "" >
<!ENTITY % SVG.Clip.attrib "" >
<!ENTITY % SVG.Mask.attrib "" >
<!ENTITY % SVG.Filter.attrib "" >
<!ENTITY % SVG.FilterColor.attrib "" >
<!ENTITY % SVG.GraphicalEvents.attrib "" >
<!ENTITY % SVG.Cursor.attrib "" >
<!ENTITY % SVG.External.attrib "" >
<!-- SVG.Conditional.class ............................. -->
<!ENTITY % SVG.Conditional.extra.class "" >
<!ENTITY % SVG.Conditional.class
"| %SVG.switch.qname; %SVG.Conditional.extra.class;"
>
<!-- SVG.Conditional.attrib ............................ -->
<!ENTITY % SVG.Conditional.extra.attrib "" >
<!ENTITY % SVG.Conditional.attrib
"requiredFeatures %FeatureList.datatype; #IMPLIED
requiredExtensions %ExtensionList.datatype; #IMPLIED
systemLanguage %LanguageCodes.datatype; #IMPLIED
%SVG.Conditional.extra.attrib;"
>
<!-- SVG.Presentation.attrib ........................... -->
<!ENTITY % SVG.Presentation.extra.attrib "" >
<!ENTITY % SVG.Presentation.attrib
"%SVG.Container.attrib;
%SVG.Viewport.attrib;
%SVG.Text.attrib;
%SVG.TextContent.attrib;
%SVG.Font.attrib;
%SVG.Paint.attrib;
%SVG.Color.attrib;
%SVG.Opacity.attrib;
%SVG.Graphics.attrib;
%SVG.Marker.attrib;
%SVG.ColorProfile.attrib;
%SVG.Gradient.attrib;
%SVG.Clip.attrib;
%SVG.Mask.attrib;
%SVG.Filter.attrib;
%SVG.FilterColor.attrib;
%SVG.Cursor.attrib;
flood-color %SVGColor.datatype; #IMPLIED
flood-opacity %OpacityValue.datatype; #IMPLIED
lighting-color %SVGColor.datatype; #IMPLIED
%SVG.Presentation.extra.attrib;"
>
<!-- switch: Switch Element ............................ -->
<!ENTITY % SVG.switch.extra.content "" >
<!ENTITY % SVG.switch.element "INCLUDE" >
<![%SVG.switch.element;[
<!ENTITY % SVG.switch.content
"( %SVG.Description.class; | %SVG.svg.qname; | %SVG.g.qname;
| %SVG.use.qname; | %SVG.text.qname; | %SVG.Animation.class;
%SVG.Conditional.class; %SVG.Image.class; %SVG.Shape.class;
%SVG.Hyperlink.class; %SVG.Extensibility.class;
%SVG.switch.extra.content; )*"
>
<!ELEMENT %SVG.switch.qname; %SVG.switch.content; >
<!-- end of SVG.switch.element -->]]>
<!ENTITY % SVG.switch.attlist "INCLUDE" >
<![%SVG.switch.attlist;[
<!ATTLIST %SVG.switch.qname;
%SVG.Core.attrib;
%SVG.Conditional.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.GraphicalEvents.attrib;
%SVG.External.attrib;
transform %TransformList.datatype; #IMPLIED
>
<!-- end of SVG.switch.attlist -->]]>
<!-- end of svg-conditional.mod -->
Image Module defines the Image.class element collection.
| Collection name | Elements in collection |
|---|---|
| Image.class | image |
<!-- ....................................................................... -->
<!-- SVG 1.1 Image Module .................................................. -->
<!-- file: svg-image.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Image//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-image.mod"
....................................................................... -->
<!-- Image
image
This module declares markup to provide support for image.
-->
<!-- Qualified Names (Default) ......................... -->
<!ENTITY % SVG.image.qname "image" >
<!-- Attribute Collections (Default) ................... -->
<!ENTITY % SVG.Core.attrib "" >
<!ENTITY % SVG.Conditional.attrib "" >
<!ENTITY % SVG.Style.attrib "" >
<!ENTITY % SVG.Viewport.attrib "" >
<!ENTITY % SVG.Color.attrib "" >
<!ENTITY % SVG.Opacity.attrib "" >
<!ENTITY % SVG.Graphics.attrib "" >
<!ENTITY % SVG.ColorProfile.attrib "" >
<!ENTITY % SVG.Clip.attrib "" >
<!ENTITY % SVG.Mask.attrib "" >
<!ENTITY % SVG.Filter.attrib "" >
<!ENTITY % SVG.GraphicalEvents.attrib "" >
<!ENTITY % SVG.Cursor.attrib "" >
<!ENTITY % SVG.XLinkEmbed.attrib "" >
<!ENTITY % SVG.External.attrib "" >
<!-- SVG.Image.class ................................... -->
<!ENTITY % SVG.Image.extra.class "" >
<!ENTITY % SVG.Image.class
"| %SVG.image.qname; %SVG.Image.extra.class;"
>
<!-- image: Image Element .............................. -->
<!ENTITY % SVG.image.extra.content "" >
<!ENTITY % SVG.image.element "INCLUDE" >
<![%SVG.image.element;[
<!ENTITY % SVG.image.content
"( %SVG.Description.class; | %SVG.Animation.class;
%SVG.image.extra.content; )*"
>
<!ELEMENT %SVG.image.qname; %SVG.image.content; >
<!-- end of SVG.image.element -->]]>
<!ENTITY % SVG.image.attlist "INCLUDE" >
<![%SVG.image.attlist;[
<!ATTLIST %SVG.image.qname;
%SVG.Core.attrib;
%SVG.Conditional.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.GraphicalEvents.attrib;
%SVG.XLinkEmbed.attrib;
%SVG.External.attrib;
x %Coordinate.datatype; #IMPLIED
y %Coordinate.datatype; #IMPLIED
width %Length.datatype; #REQUIRED
height %Length.datatype; #REQUIRED
preserveAspectRatio %PreserveAspectRatioSpec.datatype; 'xMidYMid meet'
transform %TransformList.datatype; #IMPLIED
>
<!-- end of SVG.image.attlist -->]]>
<!-- end of svg-image.mod -->
Style Module defines the Style.class element collection and the Style.attrib attribute collection.
| Collection name | Elements in collection |
|---|---|
| Style.class | style |
| Collection name | Attributes in collection |
|---|---|
| Style.attrib | style, class |
<!-- ....................................................................... -->
<!-- SVG 1.1 Style Module .................................................. -->
<!-- file: svg-style.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Style//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-style.mod"
....................................................................... -->
<!-- Style
style
This module declares markup to provide support for stylesheet.
-->
<!-- list of classes -->
<!ENTITY % ClassList.datatype "CDATA" >
<!-- comma-separated list of media descriptors. -->
<!ENTITY % MediaDesc.datatype "CDATA" >
<!-- style sheet data -->
<!ENTITY % StyleSheet.datatype "CDATA" >
<!-- Qualified Names (Default) ......................... -->
<!ENTITY % SVG.style.qname "style" >
<!-- Attribute Collections (Default) ................... -->
<!ENTITY % SVG.Core.attrib "" >
<!-- SVG.Style.class ................................... -->
<!ENTITY % SVG.Style.extra.class "" >
<!ENTITY % SVG.Style.class
"| %SVG.style.qname; %SVG.Style.extra.class;"
>
<!-- SVG.Style.attrib .................................. -->
<!ENTITY % SVG.Style.extra.attrib "" >
<!ENTITY % SVG.Style.attrib
"style %StyleSheet.datatype; #IMPLIED
class %ClassList.datatype; #IMPLIED
%SVG.Style.extra.attrib;"
>
<!-- style: Style Element .............................. -->
<!ENTITY % SVG.style.extra.content "" >
<!ENTITY % SVG.style.element "INCLUDE" >
<![%SVG.style.element;[
<!ENTITY % SVG.style.content
"( #PCDATA %SVG.style.extra.content; )*"
>
<!ELEMENT %SVG.style.qname; %SVG.style.content; >
<!-- end of SVG.style.element -->]]>
<!ENTITY % SVG.style.attlist "INCLUDE" >
<![%SVG.style.attlist;[
<!ATTLIST %SVG.style.qname;
xml:space ( preserve ) #FIXED 'preserve'
%SVG.id.attrib;
%SVG.base.attrib;
%SVG.lang.attrib;
%SVG.Core.extra.attrib;
type %ContentType.datatype; #REQUIRED
media %MediaDesc.datatype; #IMPLIED
title %Text.datatype; #IMPLIED
>
<!-- end of SVG.style.attlist -->]]>
<!-- end of svg-style.mod -->
Shape Module defines the Shape.class element collection.
| Collection name | Elements in collection |
|---|---|
| Shape.class | rect, circle, line, polyline, polygon, ellipse, path |
<!-- ....................................................................... -->
<!-- SVG 1.1 Shape Module .................................................. -->
<!-- file: svg-shape.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Shape//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-shape.mod"
....................................................................... -->
<!-- Shape
path, rect, circle, line, ellipse, polyline, polygon
This module declares markup to provide support for graphical shapes.
-->
<!-- a list of points -->
<!ENTITY % Points.datatype "CDATA" >
<!-- Qualified Names (Default) ......................... -->
<!ENTITY % SVG.path.qname "path" >
<!ENTITY % SVG.rect.qname "rect" >
<!ENTITY % SVG.circle.qname "circle" >
<!ENTITY % SVG.line.qname "line" >
<!ENTITY % SVG.ellipse.qname "ellipse" >
<!ENTITY % SVG.polyline.qname "polyline" >
<!ENTITY % SVG.polygon.qname "polygon" >
<!-- Attribute Collections (Default) ................... -->
<!ENTITY % SVG.Core.attrib "" >
<!ENTITY % SVG.Conditional.attrib "" >
<!ENTITY % SVG.Style.attrib "" >
<!ENTITY % SVG.Paint.attrib "" >
<!ENTITY % SVG.Color.attrib "" >
<!ENTITY % SVG.Opacity.attrib "" >
<!ENTITY % SVG.Graphics.attrib "" >
<!ENTITY % SVG.Marker.attrib "" >
<!ENTITY % SVG.Clip.attrib "" >
<!ENTITY % SVG.Mask.attrib "" >
<!ENTITY % SVG.Filter.attrib "" >
<!ENTITY % SVG.GraphicalEvents.attrib "" >
<!ENTITY % SVG.Cursor.attrib "" >
<!ENTITY % SVG.External.attrib "" >
<!-- SVG.Shape.class ................................... -->
<!ENTITY % SVG.Shape.extra.class "" >
<!ENTITY % SVG.Shape.class
"| %SVG.path.qname; | %SVG.rect.qname; | %SVG.circle.qname;
| %SVG.line.qname; | %SVG.ellipse.qname; | %SVG.polyline.qname;
| %SVG.polygon.qname; %SVG.Shape.extra.class;"
>
<!-- path: Path Element ................................ -->
<!ENTITY % SVG.path.extra.content "" >
<!ENTITY % SVG.path.element "INCLUDE" >
<![%SVG.path.element;[
<!ENTITY % SVG.path.content
"( %SVG.Description.class; | %SVG.Animation.class;
%SVG.path.extra.content; )*"
>
<!ELEMENT %SVG.path.qname; %SVG.path.content; >
<!-- end of SVG.path.element -->]]>
<!ENTITY % SVG.path.attlist "INCLUDE" >
<![%SVG.path.attlist;[
<!ATTLIST %SVG.path.qname;
%SVG.Core.attrib;
%SVG.Conditional.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.GraphicalEvents.attrib;
%SVG.External.attrib;
d %PathData.datatype; #REQUIRED
pathLength %Number.datatype; #IMPLIED
transform %TransformList.datatype; #IMPLIED
>
<!-- end of SVG.path.attlist -->]]>
<!-- rect: Rectangle Element ........................... -->
<!ENTITY % SVG.rect.extra.content "" >
<!ENTITY % SVG.rect.element "INCLUDE" >
<![%SVG.rect.element;[
<!ENTITY % SVG.rect.content
"( %SVG.Description.class; | %SVG.Animation.class;
%SVG.rect.extra.content; )*"
>
<!ELEMENT %SVG.rect.qname; %SVG.rect.content; >
<!-- end of SVG.rect.element -->]]>
<!ENTITY % SVG.rect.attlist "INCLUDE" >
<![%SVG.rect.attlist;[
<!ATTLIST %SVG.rect.qname;
%SVG.Core.attrib;
%SVG.Conditional.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.GraphicalEvents.attrib;
%SVG.External.attrib;
x %Coordinate.datatype; #IMPLIED
y %Coordinate.datatype; #IMPLIED
width %Length.datatype; #REQUIRED
height %Length.datatype; #REQUIRED
rx %Length.datatype; #IMPLIED
ry %Length.datatype; #IMPLIED
transform %TransformList.datatype; #IMPLIED
>
<!-- end of SVG.rect.attlist -->]]>
<!-- circle: Circle Element ............................ -->
<!ENTITY % SVG.circle.extra.content "" >
<!ENTITY % SVG.circle.element "INCLUDE" >
<![%SVG.circle.element;[
<!ENTITY % SVG.circle.content
"( %SVG.Description.class; | %SVG.Animation.class;
%SVG.circle.extra.content; )*"
>
<!ELEMENT %SVG.circle.qname; %SVG.circle.content; >
<!-- end of SVG.circle.element -->]]>
<!ENTITY % SVG.circle.attlist "INCLUDE" >
<![%SVG.circle.attlist;[
<!ATTLIST %SVG.circle.qname;
%SVG.Core.attrib;
%SVG.Conditional.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.GraphicalEvents.attrib;
%SVG.External.attrib;
cx %Coordinate.datatype; #IMPLIED
cy %Coordinate.datatype; #IMPLIED
r %Length.datatype; #REQUIRED
transform %TransformList.datatype; #IMPLIED
>
<!-- end of SVG.circle.attlist -->]]>
<!-- line: Line Element ................................ -->
<!ENTITY % SVG.line.extra.content "" >
<!ENTITY % SVG.line.element "INCLUDE" >
<![%SVG.line.element;[
<!ENTITY % SVG.line.content
"( %SVG.Description.class; | %SVG.Animation.class;
%SVG.line.extra.content; )*"
>
<!ELEMENT %SVG.line.qname; %SVG.line.content; >
<!-- end of SVG.line.element -->]]>
<!ENTITY % SVG.line.attlist "INCLUDE" >
<![%SVG.line.attlist;[
<!ATTLIST %SVG.line.qname;
%SVG.Core.attrib;
%SVG.Conditional.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.GraphicalEvents.attrib;
%SVG.External.attrib;
x1 %Coordinate.datatype; #IMPLIED
y1 %Coordinate.datatype; #IMPLIED
x2 %Coordinate.datatype; #IMPLIED
y2 %Coordinate.datatype; #IMPLIED
transform %TransformList.datatype; #IMPLIED
>
<!-- end of SVG.line.attlist -->]]>
<!-- ellipse: Ellipse Element .......................... -->
<!ENTITY % SVG.ellipse.extra.content "" >
<!ENTITY % SVG.ellipse.element "INCLUDE" >
<![%SVG.ellipse.element;[
<!ENTITY % SVG.ellipse.content
"( %SVG.Description.class; | %SVG.Animation.class;
%SVG.ellipse.extra.content; )*"
>
<!ELEMENT %SVG.ellipse.qname; %SVG.ellipse.content; >
<!-- end of SVG.ellipse.element -->]]>
<!ENTITY % SVG.ellipse.attlist "INCLUDE" >
<![%SVG.ellipse.attlist;[
<!ATTLIST %SVG.ellipse.qname;
%SVG.Core.attrib;
%SVG.Conditional.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.GraphicalEvents.attrib;
%SVG.External.attrib;
cx %Coordinate.datatype; #IMPLIED
cy %Coordinate.datatype; #IMPLIED
rx %Length.datatype; #REQUIRED
ry %Length.datatype; #REQUIRED
transform %TransformList.datatype; #IMPLIED
>
<!-- end of SVG.ellipse.attlist -->]]>
<!-- polyline: Polyline Element ........................ -->
<!ENTITY % SVG.polyline.extra.content "" >
<!ENTITY % SVG.polyline.element "INCLUDE" >
<![%SVG.polyline.element;[
<!ENTITY % SVG.polyline.content
"( %SVG.Description.class; | %SVG.Animation.class;
%SVG.polyline.extra.content; )*"
>
<!ELEMENT %SVG.polyline.qname; %SVG.polyline.content; >
<!-- end of SVG.polyline.element -->]]>
<!ENTITY % SVG.polyline.attlist "INCLUDE" >
<![%SVG.polyline.attlist;[
<!ATTLIST %SVG.polyline.qname;
%SVG.Core.attrib;
%SVG.Conditional.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.GraphicalEvents.attrib;
%SVG.External.attrib;
points %Points.datatype; #REQUIRED
transform %TransformList.datatype; #IMPLIED
>
<!-- end of SVG.polyline.attlist -->]]>
<!-- polygon: Polygon Element .......................... -->
<!ENTITY % SVG.polygon.extra.content "" >
<!ENTITY % SVG.polygon.element "INCLUDE" >
<![%SVG.polygon.element;[
<!ENTITY % SVG.polygon.content
"( %SVG.Description.class; | %SVG.Animation.class;
%SVG.polygon.extra.content; )*"
>
<!ELEMENT %SVG.polygon.qname; %SVG.polygon.content; >
<!-- end of SVG.polygon.element -->]]>
<!ENTITY % SVG.polygon.attlist "INCLUDE" >
<![%SVG.polygon.attlist;[
<!ATTLIST %SVG.polygon.qname;
%SVG.Core.attrib;
%SVG.Conditional.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.GraphicalEvents.attrib;
%SVG.External.attrib;
points %Points.datatype; #REQUIRED
transform %TransformList.datatype; #IMPLIED
>
<!-- end of SVG.polygon.attlist -->]]>
<!-- end of svg-shape.mod -->
Text Module defines the Text.class and TextContent.class element collections and the Text.attrib, TextContent.attrib and Font.attrib attribute sets.
| Collection name | Elements in collection |
|---|---|
| Text.class | text, altGlyphDef |
| TextContent.class | tspan, tref, textPath, altGlyph |
| Collection name | Attributes in collection |
|---|---|
| Text.attrib | writing-mode |
| TextContent.attrib | alignment-baseline, baseline-shift, direction, dominant-baseline, glyph-orientation-horizontal, glyph-orientation-vertical, kerning, letter-spacing, text-anchor, text-decoration, unicode-bidi, word-spacing |
| Font.attrib | font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight |
<!-- ....................................................................... -->
<!-- SVG 1.1 Text Module ................................................... -->
<!-- file: svg-text.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Text//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-text.mod"
....................................................................... -->
<!-- Text
text, tspan, tref, textPath, altGlyph, altGlyphDef, altGlyphItem,
glyphRef
This module declares markup to provide support for alternate glyph.
-->
<!-- 'baseline-shift' property/attribute value (тобто, 'baseline', 'sub', etc.) -->
<!ENTITY % BaselineShiftValue.datatype "CDATA" >
<!-- 'font-family' property/attribute value (тобто, list of fonts) -->
<!ENTITY % FontFamilyValue.datatype "CDATA" >
<!-- 'font-size' property/attribute value -->
<!ENTITY % FontSizeValue.datatype "CDATA" >
<!-- 'font-size-adjust' property/attribute value -->
<!ENTITY % FontSizeAdjustValue.datatype "CDATA" >
<!-- 'glyph-orientation-horizontal' property/attribute value (тобто, <angle>) -->
<!ENTITY % GlyphOrientationHorizontalValue.datatype "CDATA" >
<!-- 'glyph-orientation-vertical' property/attribute value (тобто, 'auto', <angle>) -->
<!ENTITY % GlyphOrientationVerticalValue.datatype "CDATA" >
<!-- 'kerning' property/attribute value (тобто, 'auto', <length>) -->
<!ENTITY % KerningValue.datatype "CDATA" >
<!-- 'letter-spacing' or 'word-spacing' property/attribute value (тобто, 'normal', <length>) -->
<!ENTITY % SpacingValue.datatype "CDATA" >
<!-- 'text-decoration' property/attribute value (тобто, 'none', 'underline') -->
<!ENTITY % TextDecorationValue.datatype "CDATA" >
<!-- Qualified Names (Default) ......................... -->
<!ENTITY % SVG.text.qname "text" >
<!ENTITY % SVG.tspan.qname "tspan" >
<!ENTITY % SVG.tref.qname "tref" >
<!ENTITY % SVG.textPath.qname "textPath" >
<!ENTITY % SVG.altGlyph.qname "altGlyph" >
<!ENTITY % SVG.altGlyphDef.qname "altGlyphDef" >
<!ENTITY % SVG.altGlyphItem.qname "altGlyphItem" >
<!ENTITY % SVG.glyphRef.qname "glyphRef" >
<!-- Attribute Collections (Default) ................... -->
<!ENTITY % SVG.Core.attrib "" >
<!ENTITY % SVG.Conditional.attrib "" >
<!ENTITY % SVG.Style.attrib "" >
<!ENTITY % SVG.Paint.attrib "" >
<!ENTITY % SVG.Color.attrib "" >
<!ENTITY % SVG.Opacity.attrib "" >
<!ENTITY % SVG.Graphics.attrib "" >
<!ENTITY % SVG.Clip.attrib "" >
<!ENTITY % SVG.Mask.attrib "" >
<!ENTITY % SVG.Filter.attrib "" >
<!ENTITY % SVG.GraphicalEvents.attrib "" >
<!ENTITY % SVG.Cursor.attrib "" >
<!ENTITY % SVG.XLink.attrib "" >
<!ENTITY % SVG.XLinkRequired.attrib "" >
<!ENTITY % SVG.External.attrib "" >
<!-- SVG.Text.class .................................... -->
<!ENTITY % SVG.Text.extra.class "" >
<!ENTITY % SVG.Text.class
"| %SVG.text.qname; | %SVG.altGlyphDef.qname; %SVG.Text.extra.class;"
>
<!-- SVG.TextContent.class ............................. -->
<!ENTITY % SVG.TextContent.extra.class "" >
<!ENTITY % SVG.TextContent.class
"| %SVG.tspan.qname; | %SVG.tref.qname; | %SVG.textPath.qname;
| %SVG.altGlyph.qname; %SVG.TextContent.extra.class;"
>
<!-- SVG.Text.attrib ................................... -->
<!ENTITY % SVG.Text.extra.attrib "" >
<!ENTITY % SVG.Text.attrib
"writing-mode ( lr-tb | rl-tb | tb-rl | lr | rl | tb | inherit ) #IMPLIED
%SVG.Text.extra.attrib;"
>
<!-- SVG.TextContent.attrib ............................ -->
<!ENTITY % SVG.TextContent.extra.attrib "" >
<!ENTITY % SVG.TextContent.attrib
"alignment-baseline ( auto | baseline | before-edge | text-before-edge |
middle | central | after-edge | text-after-edge |
ideographic | alphabetic | hanging | mathematical |
inherit ) #IMPLIED
baseline-shift %BaselineShiftValue.datatype; #IMPLIED
direction ( ltr | rtl | inherit ) #IMPLIED
dominant-baseline ( auto | use-script | no-change | reset-size |
ideographic | alphabetic | hanging | mathematical |
central | middle | text-after-edge | text-before-edge |
inherit ) #IMPLIED
glyph-orientation-horizontal %GlyphOrientationHorizontalValue.datatype;
#IMPLIED
glyph-orientation-vertical %GlyphOrientationVerticalValue.datatype;
#IMPLIED
kerning %KerningValue.datatype; #IMPLIED
letter-spacing %SpacingValue.datatype; #IMPLIED
text-anchor ( start | middle | end | inherit ) #IMPLIED
text-decoration %TextDecorationValue.datatype; #IMPLIED
unicode-bidi ( normal | embed | bidi-override | inherit ) #IMPLIED
word-spacing %SpacingValue.datatype; #IMPLIED
%SVG.TextContent.extra.attrib;"
>
<!-- SVG.Font.attrib ................................... -->
<!ENTITY % SVG.Font.extra.attrib "" >
<!ENTITY % SVG.Font.attrib
"font-family %FontFamilyValue.datatype; #IMPLIED
font-size %FontSizeValue.datatype; #IMPLIED
font-size-adjust %FontSizeAdjustValue.datatype; #IMPLIED
font-stretch ( normal | wider | narrower | ultra-condensed |
extra-condensed | condensed | semi-condensed |
semi-expanded | expanded | extra-expanded |
ultra-expanded | inherit ) #IMPLIED
font-style ( normal | italic | oblique | inherit ) #IMPLIED
font-variant ( normal | small-caps | inherit ) #IMPLIED
font-weight ( normal | bold | bolder | lighter | 100 | 200 | 300 | 400 |
500 | 600 | 700 | 800 | 900 | inherit ) #IMPLIED
%SVG.Font.extra.attrib;"
>
<!-- text: Text Element ................................ -->
<!ENTITY % SVG.text.extra.content "" >
<!ENTITY % SVG.text.element "INCLUDE" >
<![%SVG.text.element;[
<!ENTITY % SVG.text.content
"( #PCDATA | %SVG.Description.class; | %SVG.Animation.class;
%SVG.TextContent.class; %SVG.Hyperlink.class;
%SVG.text.extra.content; )*"
>
<!ELEMENT %SVG.text.qname; %SVG.text.content; >
<!-- end of SVG.text.element -->]]>
<!ENTITY % SVG.text.attlist "INCLUDE" >
<![%SVG.text.attlist;[
<!ATTLIST %SVG.text.qname;
%SVG.Core.attrib;
%SVG.Conditional.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.GraphicalEvents.attrib;
%SVG.External.attrib;
x %Coordinates.datatype; #IMPLIED
y %Coordinates.datatype; #IMPLIED
dx %Lengths.datatype; #IMPLIED
dy %Lengths.datatype; #IMPLIED
rotate %Numbers.datatype; #IMPLIED
textLength %Length.datatype; #IMPLIED
lengthAdjust ( spacing | spacingAndGlyphs ) #IMPLIED
transform %TransformList.datatype; #IMPLIED
>
<!-- end of SVG.text.attlist -->]]>
<!-- tspan: Text Span Element .......................... -->
<!ENTITY % SVG.tspan.extra.content "" >
<!ENTITY % SVG.tspan.element "INCLUDE" >
<![%SVG.tspan.element;[
<!ENTITY % SVG.tspan.content
"( #PCDATA | %SVG.tspan.qname; | %SVG.tref.qname; | %SVG.altGlyph.qname;
| %SVG.animate.qname; | %SVG.set.qname; | %SVG.animateColor.qname;
| %SVG.Description.class; %SVG.Hyperlink.class;
%SVG.tspan.extra.content; )*"
>
<!ELEMENT %SVG.tspan.qname; %SVG.tspan.content; >
<!-- end of SVG.tspan.element -->]]>
<!ENTITY % SVG.tspan.attlist "INCLUDE" >
<![%SVG.tspan.attlist;[
<!ATTLIST %SVG.tspan.qname;
%SVG.Core.attrib;
%SVG.Conditional.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.GraphicalEvents.attrib;
%SVG.External.attrib;
x %Coordinates.datatype; #IMPLIED
y %Coordinates.datatype; #IMPLIED
dx %Lengths.datatype; #IMPLIED
dy %Lengths.datatype; #IMPLIED
rotate %Numbers.datatype; #IMPLIED
textLength %Length.datatype; #IMPLIED
lengthAdjust ( spacing | spacingAndGlyphs ) #IMPLIED
>
<!-- end of SVG.tspan.attlist -->]]>
<!-- tref: Text Reference Element ...................... -->
<!ENTITY % SVG.tref.extra.content "" >
<!ENTITY % SVG.tref.element "INCLUDE" >
<![%SVG.tref.element;[
<!ENTITY % SVG.tref.content
"( %SVG.animate.qname; | %SVG.set.qname; | %SVG.animateColor.qname;
| %SVG.Description.class; %SVG.tref.extra.content; )*"
>
<!ELEMENT %SVG.tref.qname; %SVG.tref.content; >
<!-- end of SVG.tref.element -->]]>
<!ENTITY % SVG.tref.attlist "INCLUDE" >
<![%SVG.tref.attlist;[
<!ATTLIST %SVG.tref.qname;
%SVG.Core.attrib;
%SVG.Conditional.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.GraphicalEvents.attrib;
%SVG.XLinkRequired.attrib;
%SVG.External.attrib;
x %Coordinates.datatype; #IMPLIED
y %Coordinates.datatype; #IMPLIED
dx %Lengths.datatype; #IMPLIED
dy %Lengths.datatype; #IMPLIED
rotate %Numbers.datatype; #IMPLIED
textLength %Length.datatype; #IMPLIED
lengthAdjust ( spacing | spacingAndGlyphs ) #IMPLIED
>
<!-- end of SVG.tref.attlist -->]]>
<!-- textPath: Text Path Element ....................... -->
<!ENTITY % SVG.textPath.extra.content "" >
<!ENTITY % SVG.textPath.element "INCLUDE" >
<![%SVG.textPath.element;[
<!ENTITY % SVG.textPath.content
"( #PCDATA | %SVG.tspan.qname; | %SVG.tref.qname; | %SVG.altGlyph.qname;
| %SVG.animate.qname; | %SVG.set.qname; | %SVG.animateColor.qname;
| %SVG.Description.class; %SVG.Hyperlink.class;
%SVG.textPath.extra.content; )*"
>
<!ELEMENT %SVG.textPath.qname; %SVG.textPath.content; >
<!-- end of SVG.textPath.element -->]]>
<!ENTITY % SVG.textPath.attlist "INCLUDE" >
<![%SVG.textPath.attlist;[
<!ATTLIST %SVG.textPath.qname;
%SVG.Core.attrib;
%SVG.Conditional.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.GraphicalEvents.attrib;
%SVG.XLinkRequired.attrib;
%SVG.External.attrib;
startOffset %Length.datatype; #IMPLIED
textLength %Length.datatype; #IMPLIED
lengthAdjust ( spacing | spacingAndGlyphs ) #IMPLIED
method ( align | stretch ) #IMPLIED
spacing ( auto | exact ) #IMPLIED
>
<!-- end of SVG.textPath.attlist -->]]>
<!-- altGlyph: Alternate Glyph Element ................. -->
<!ENTITY % SVG.altGlyph.extra.content "" >
<!ENTITY % SVG.altGlyph.element "INCLUDE" >
<![%SVG.altGlyph.element;[
<!ENTITY % SVG.altGlyph.content
"( #PCDATA %SVG.altGlyph.extra.content; )*"
>
<!ELEMENT %SVG.altGlyph.qname; %SVG.altGlyph.content; >
<!-- end of SVG.altGlyph.element -->]]>
<!ENTITY % SVG.altGlyph.attlist "INCLUDE" >
<![%SVG.altGlyph.attlist;[
<!ATTLIST %SVG.altGlyph.qname;
%SVG.Core.attrib;
%SVG.Conditional.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.GraphicalEvents.attrib;
%SVG.XLink.attrib;
%SVG.External.attrib;
x %Coordinates.datatype; #IMPLIED
y %Coordinates.datatype; #IMPLIED
dx %Lengths.datatype; #IMPLIED
dy %Lengths.datatype; #IMPLIED
glyphRef CDATA #IMPLIED
format CDATA #IMPLIED
rotate %Numbers.datatype; #IMPLIED
>
<!-- end of SVG.altGlyph.attlist -->]]>
<!-- altGlyphDef: Alternate Glyph Definition Element ... -->
<!ENTITY % SVG.altGlyphDef.extra.content "" >
<!ENTITY % SVG.altGlyphDef.element "INCLUDE" >
<![%SVG.altGlyphDef.element;[
<!ENTITY % SVG.altGlyphDef.content
"(( %SVG.glyphRef.qname;+ | %SVG.altGlyphItem.qname;+ )
%SVG.altGlyphDef.extra.content; )"
>
<!ELEMENT %SVG.altGlyphDef.qname; %SVG.altGlyphDef.content; >
<!-- end of SVG.altGlyphDef.element -->]]>
<!ENTITY % SVG.altGlyphDef.attlist "INCLUDE" >
<![%SVG.altGlyphDef.attlist;[
<!ATTLIST %SVG.altGlyphDef.qname;
%SVG.Core.attrib;
>
<!-- end of SVG.altGlyphDef.attlist -->]]>
<!-- altGlyphItem: Alternate Glyph Item Element ........ -->
<!ENTITY % SVG.altGlyphItem.extra.content "" >
<!ENTITY % SVG.altGlyphItem.element "INCLUDE" >
<![%SVG.altGlyphItem.element;[
<!ENTITY % SVG.altGlyphItem.content
"( %SVG.glyphRef.qname;+ %SVG.altGlyphItem.extra.content; )"
>
<!ELEMENT %SVG.altGlyphItem.qname; %SVG.altGlyphItem.content; >
<!-- end of SVG.altGlyphItem.element -->]]>
<!ENTITY % SVG.altGlyphItem.attlist "INCLUDE" >
<![%SVG.altGlyphItem.attlist;[
<!ATTLIST %SVG.altGlyphItem.qname;
%SVG.Core.attrib;
>
<!-- end of SVG.altGlyphItem.attlist -->]]>
<!-- glyphRef: Glyph Reference Element ................. -->
<!ENTITY % SVG.glyphRef.element "INCLUDE" >
<![%SVG.glyphRef.element;[
<!ENTITY % SVG.glyphRef.content "EMPTY" >
<!ELEMENT %SVG.glyphRef.qname; %SVG.glyphRef.content; >
<!-- end of SVG.glyphRef.element -->]]>
<!ENTITY % SVG.glyphRef.attlist "INCLUDE" >
<![%SVG.glyphRef.attlist;[
<!ATTLIST %SVG.glyphRef.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.XLink.attrib;
x %Number.datatype; #IMPLIED
y %Number.datatype; #IMPLIED
dx %Number.datatype; #IMPLIED
dy %Number.datatype; #IMPLIED
glyphRef CDATA #IMPLIED
format CDATA #IMPLIED
>
<!-- end of SVG.glyphRef.attlist -->]]>
<!-- end of svg-text.mod -->
Basic Text Module defines the Text.class and TextContent.class element collections and the TextContent.attrib and Font.attrib attribute sets.
| Collection name | Elements in collection |
|---|---|
| Text.class | text |
| TextContent.class | (empty) |
| Collection name | Attributes in collection |
|---|---|
| TextContent.attrib | text-anchor |
| Font.attrib | font-family, font-size, font-style, font-weight |
<!-- ....................................................................... -->
<!-- SVG 1.1 Basic Text Module ............................................. -->
<!-- file: svg-basic-text.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Basic Text//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-basic-text.mod"
....................................................................... -->
<!-- Basic Text
text
This module declares markup to provide support for text.
-->
<!-- 'font-family' property/attribute value (тобто, list of fonts) -->
<!ENTITY % FontFamilyValue.datatype "CDATA" >
<!-- 'font-size' property/attribute value -->
<!ENTITY % FontSizeValue.datatype "CDATA" >
<!-- Qualified Names (Default) ......................... -->
<!ENTITY % SVG.text.qname "text" >
<!-- Attribute Collections (Default) ................... -->
<!ENTITY % SVG.Core.attrib "" >
<!ENTITY % SVG.Conditional.attrib "" >
<!ENTITY % SVG.Style.attrib "" >
<!ENTITY % SVG.Paint.attrib "" >
<!ENTITY % SVG.Color.attrib "" >
<!ENTITY % SVG.Opacity.attrib "" >
<!ENTITY % SVG.Graphics.attrib "" >
<!ENTITY % SVG.Clip.attrib "" >
<!ENTITY % SVG.Mask.attrib "" >
<!ENTITY % SVG.Filter.attrib "" >
<!ENTITY % SVG.GraphicalEvents.attrib "" >
<!ENTITY % SVG.Cursor.attrib "" >
<!ENTITY % SVG.External.attrib "" >
<!-- SVG.Text.class .................................... -->
<!ENTITY % SVG.Text.extra.class "" >
<!ENTITY % SVG.Text.class
"| %SVG.text.qname; %SVG.Text.extra.class;"
>
<!-- SVG.TextContent.attrib ............................ -->
<!ENTITY % SVG.TextContent.extra.attrib "" >
<!ENTITY % SVG.TextContent.attrib
"text-anchor ( start | middle | end | inherit ) #IMPLIED
%SVG.TextContent.extra.attrib;"
>
<!-- SVG.Font.attrib ................................... -->
<!ENTITY % SVG.Font.extra.attrib "" >
<!ENTITY % SVG.Font.attrib
"font-family %FontFamilyValue.datatype; #IMPLIED
font-size %FontSizeValue.datatype; #IMPLIED
font-style ( normal | italic | oblique | inherit ) #IMPLIED
font-weight ( normal | bold | bolder | lighter | 100 | 200 | 300 | 400 |
500 | 600 | 700 | 800 | 900 | inherit ) #IMPLIED
%SVG.Font.extra.attrib;"
>
<!-- text: Text Element ................................ -->
<!ENTITY % SVG.text.extra.content "" >
<!ENTITY % SVG.text.element "INCLUDE" >
<![%SVG.text.element;[
<!ENTITY % SVG.text.content
"( #PCDATA | %SVG.Description.class; | %SVG.Animation.class;
%SVG.Hyperlink.class; %SVG.text.extra.content; )*"
>
<!ELEMENT %SVG.text.qname; %SVG.text.content; >
<!-- end of SVG.text.element -->]]>
<!ENTITY % SVG.text.attlist "INCLUDE" >
<![%SVG.text.attlist;[
<!ATTLIST %SVG.text.qname;
%SVG.Core.attrib;
%SVG.Conditional.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.GraphicalEvents.attrib;
%SVG.External.attrib;
x %Coordinates.datatype; #IMPLIED
y %Coordinates.datatype; #IMPLIED
rotate %Numbers.datatype; #IMPLIED
transform %TransformList.datatype; #IMPLIED
>
<!-- end of SVG.text.attlist -->]]>
<!-- end of svg-basic-text.mod -->
Marker Module defines the Marker.class element collection and the Marker.attrib attribute set.
| Collection name | Elements in collection |
|---|---|
| Marker.class | marker |
| Collection name | Attributes in collection |
|---|---|
| Marker.attrib | marker-start, marker-mid, marker-end |
<!-- ....................................................................... -->
<!-- SVG 1.1 Marker Module ................................................. -->
<!-- file: svg-marker.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Marker//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-marker.mod"
....................................................................... -->
<!-- Marker
marker
This module declares markup to provide support for marker.
-->
<!-- 'marker' property/attribute value (тобто, 'none', <uri>) -->
<!ENTITY % MarkerValue.datatype "CDATA" >
<!-- Qualified Names (Default) ......................... -->
<!ENTITY % SVG.marker.qname "marker" >
<!-- Attribute Collections (Default) ................... -->
<!ENTITY % SVG.Core.attrib "" >
<!ENTITY % SVG.Container.attrib "" >
<!ENTITY % SVG.Style.attrib "" >
<!ENTITY % SVG.Viewport.attrib "" >
<!ENTITY % SVG.Text.attrib "" >
<!ENTITY % SVG.TextContent.attrib "" >
<!ENTITY % SVG.Font.attrib "" >
<!ENTITY % SVG.Paint.attrib "" >
<!ENTITY % SVG.Color.attrib "" >
<!ENTITY % SVG.Opacity.attrib "" >
<!ENTITY % SVG.Graphics.attrib "" >
<!ENTITY % SVG.ColorProfile.attrib "" >
<!ENTITY % SVG.Gradient.attrib "" >
<!ENTITY % SVG.Clip.attrib "" >
<!ENTITY % SVG.Mask.attrib "" >
<!ENTITY % SVG.Filter.attrib "" >
<!ENTITY % SVG.FilterColor.attrib "" >
<!ENTITY % SVG.Cursor.attrib "" >
<!ENTITY % SVG.External.attrib "" >
<!-- SVG.Marker.class .................................. -->
<!ENTITY % SVG.Marker.extra.class "" >
<!ENTITY % SVG.Marker.class
"| %SVG.marker.qname; %SVG.Marker.extra.class;"
>
<!-- SVG.Marker.attrib ................................. -->
<!ENTITY % SVG.Marker.extra.attrib "" >
<!ENTITY % SVG.Marker.attrib
"marker-start %MarkerValue.datatype; #IMPLIED
marker-mid %MarkerValue.datatype; #IMPLIED
marker-end %MarkerValue.datatype; #IMPLIED
%SVG.Marker.extra.attrib;"
>
<!-- SVG.Presentation.attrib ........................... -->
<!ENTITY % SVG.Presentation.extra.attrib "" >
<!ENTITY % SVG.Presentation.attrib
"%SVG.Container.attrib;
%SVG.Viewport.attrib;
%SVG.Text.attrib;
%SVG.TextContent.attrib;
%SVG.Font.attrib;
%SVG.Paint.attrib;
%SVG.Color.attrib;
%SVG.Opacity.attrib;
%SVG.Graphics.attrib;
%SVG.Marker.attrib;
%SVG.ColorProfile.attrib;
%SVG.Gradient.attrib;
%SVG.Clip.attrib;
%SVG.Mask.attrib;
%SVG.Filter.attrib;
%SVG.FilterColor.attrib;
%SVG.Cursor.attrib;
flood-color %SVGColor.datatype; #IMPLIED
flood-opacity %OpacityValue.datatype; #IMPLIED
lighting-color %SVGColor.datatype; #IMPLIED
%SVG.Presentation.extra.attrib;"
>
<!-- marker: Marker Element ............................ -->
<!ENTITY % SVG.marker.extra.content "" >
<!ENTITY % SVG.marker.element "INCLUDE" >
<![%SVG.marker.element;[
<!ENTITY % SVG.marker.content
"( %SVG.Description.class; | %SVG.Animation.class; %SVG.Structure.class;
%SVG.Conditional.class; %SVG.Image.class; %SVG.Style.class;
%SVG.Shape.class; %SVG.Text.class; %SVG.Marker.class;
%SVG.ColorProfile.class; %SVG.Gradient.class; %SVG.Pattern.class;
%SVG.Clip.class; %SVG.Mask.class; %SVG.Filter.class; %SVG.Cursor.class;
%SVG.Hyperlink.class; %SVG.View.class; %SVG.Script.class;
%SVG.Font.class; %SVG.Extensibility.class; %SVG.marker.extra.content; )*"
>
<!ELEMENT %SVG.marker.qname; %SVG.marker.content; >
<!-- end of SVG.marker.element -->]]>
<!ENTITY % SVG.marker.attlist "INCLUDE" >
<![%SVG.marker.attlist;[
<!ATTLIST %SVG.marker.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.External.attrib;
refX %Coordinate.datatype; #IMPLIED
refY %Coordinate.datatype; #IMPLIED
markerUnits ( strokeWidth | userSpaceOnUse ) #IMPLIED
markerWidth %Length.datatype; #IMPLIED
markerHeight %Length.datatype; #IMPLIED
orient CDATA #IMPLIED
viewBox %ViewBoxSpec.datatype; #IMPLIED
preserveAspectRatio %PreserveAspectRatioSpec.datatype; 'xMidYMid meet'
>
<!-- end of SVG.marker.attlist -->]]>
<!-- end of svg-marker.mod -->
Color Profile Module defines the ColorProfile.class element collection.
| Collection name | Elements in collection |
|---|---|
| ColorProfile.class | color-profile |
<!-- ....................................................................... -->
<!-- SVG 1.1 Color Profile Module .......................................... -->
<!-- file: svg-profile.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Color Profile//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-profile.mod"
....................................................................... -->
<!-- Color Profile
color-profile
This module declares markup to provide support for color profile.
-->
<!-- Qualified Names (Default) ......................... -->
<!ENTITY % SVG.color-profile.qname "color-profile" >
<!-- Attribute Collections (Default) ................... -->
<!ENTITY % SVG.Core.attrib "" >
<!ENTITY % SVG.XLink.attrib "" >
<!-- SVG.ColorProfile.class ............................ -->
<!ENTITY % SVG.ColorProfile.extra.class "" >
<!ENTITY % SVG.ColorProfile.class
"| %SVG.color-profile.qname; %SVG.ColorProfile.extra.class;"
>
<!-- SVG.ColorProfile.attrib ........................... -->
<!ENTITY % SVG.ColorProfile.extra.attrib "" >
<!ENTITY % SVG.ColorProfile.attrib
"color-profile CDATA #IMPLIED
%SVG.ColorProfile.extra.attrib;"
>
<!-- color-profile: Color Profile Element .............. -->
<!ENTITY % SVG.color-profile.extra.content "" >
<!ENTITY % SVG.color-profile.element "INCLUDE" >
<![%SVG.color-profile.element;[
<!ENTITY % SVG.color-profile.content
"( %SVG.Description.class; %SVG.color-profile.extra.content; )*"
>
<!ELEMENT %SVG.color-profile.qname; %SVG.color-profile.content; >
<!-- end of SVG.color-profile.element -->]]>
<!ENTITY % SVG.color-profile.attlist "INCLUDE" >
<![%SVG.color-profile.attlist;[
<!ATTLIST %SVG.color-profile.qname;
%SVG.Core.attrib;
%SVG.XLink.attrib;
local CDATA #IMPLIED
name CDATA #REQUIRED
rendering-intent ( auto | perceptual | relative-colorimetric | saturation |
absolute-colorimetric ) 'auto'
>
<!-- end of SVG.color-profile.attlist -->]]>
<!-- end of svg-profile.mod -->
Gradient Module defines the Gradient.class element collection and the Gradient.attrib attribute set.
| Collection name | Elements in collection |
|---|---|
| Gradient.class | linearGradient, radialGradient |
| Collection name | Attributes in collection |
|---|---|
| Gradient.attrib | stop-color, stop-opacity |
<!-- ....................................................................... -->
<!-- SVG 1.1 Gradient Module ............................................... -->
<!-- file: svg-gradient.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Gradient//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-gradient.mod"
....................................................................... -->
<!-- Gradient
linearGradient, radialGradient, stop
This module declares markup to provide support for gradient fill.
-->
<!-- a <number> or a <percentage> -->
<!ENTITY % NumberOrPercentage.datatype "CDATA" >
<!-- Qualified Names (Default) ......................... -->
<!ENTITY % SVG.linearGradient.qname "linearGradient" >
<!ENTITY % SVG.radialGradient.qname "radialGradient" >
<!ENTITY % SVG.stop.qname "stop" >
<!-- Attribute Collections (Default) ................... -->
<!ENTITY % SVG.Core.attrib "" >
<!ENTITY % SVG.Style.attrib "" >
<!ENTITY % SVG.Color.attrib "" >
<!ENTITY % SVG.XLink.attrib "" >
<!ENTITY % SVG.External.attrib "" >
<!-- SVG.Gradient.class ................................ -->
<!ENTITY % SVG.Gradient.extra.class "" >
<!ENTITY % SVG.Gradient.class
"| %SVG.linearGradient.qname; | %SVG.radialGradient.qname;
%SVG.Gradient.extra.class;"
>
<!-- SVG.Gradient.attrib ............................... -->
<!ENTITY % SVG.Gradient.extra.attrib "" >
<!ENTITY % SVG.Gradient.attrib
"stop-color %SVGColor.datatype; #IMPLIED
stop-opacity %OpacityValue.datatype; #IMPLIED
%SVG.Gradient.extra.attrib;"
>
<!-- linearGradient: Linear Gradient Element ........... -->
<!ENTITY % SVG.linearGradient.extra.content "" >
<!ENTITY % SVG.linearGradient.element "INCLUDE" >
<![%SVG.linearGradient.element;[
<!ENTITY % SVG.linearGradient.content
"( %SVG.Description.class; | %SVG.stop.qname; | %SVG.animate.qname;
| %SVG.set.qname; | %SVG.animateTransform.qname;
%SVG.linearGradient.extra.content; )*"
>
<!ELEMENT %SVG.linearGradient.qname; %SVG.linearGradient.content; >
<!-- end of SVG.linearGradient.element -->]]>
<!ENTITY % SVG.linearGradient.attlist "INCLUDE" >
<![%SVG.linearGradient.attlist;[
<!ATTLIST %SVG.linearGradient.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.XLink.attrib;
%SVG.External.attrib;
x1 %Coordinate.datatype; #IMPLIED
y1 %Coordinate.datatype; #IMPLIED
x2 %Coordinate.datatype; #IMPLIED
y2 %Coordinate.datatype; #IMPLIED
gradientUnits ( userSpaceOnUse | objectBoundingBox ) #IMPLIED
gradientTransform %TransformList.datatype; #IMPLIED
spreadMethod ( pad | reflect | repeat ) #IMPLIED
>
<!-- end of SVG.linearGradient.attlist -->]]>
<!-- radialGradient: Radial Gradient Element ........... -->
<!ENTITY % SVG.radialGradient.extra.content "" >
<!ENTITY % SVG.radialGradient.element "INCLUDE" >
<![%SVG.radialGradient.element;[
<!ENTITY % SVG.radialGradient.content
"( %SVG.Description.class; | %SVG.stop.qname; | %SVG.animate.qname;
| %SVG.set.qname; | %SVG.animateTransform.qname;
%SVG.radialGradient.extra.content; )*"
>
<!ELEMENT %SVG.radialGradient.qname; %SVG.radialGradient.content; >
<!-- end of SVG.radialGradient.element -->]]>
<!ENTITY % SVG.radialGradient.attlist "INCLUDE" >
<![%SVG.radialGradient.attlist;[
<!ATTLIST %SVG.radialGradient.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.XLink.attrib;
%SVG.External.attrib;
cx %Coordinate.datatype; #IMPLIED
cy %Coordinate.datatype; #IMPLIED
r %Length.datatype; #IMPLIED
fx %Coordinate.datatype; #IMPLIED
fy %Coordinate.datatype; #IMPLIED
gradientUnits ( userSpaceOnUse | objectBoundingBox ) #IMPLIED
gradientTransform %TransformList.datatype; #IMPLIED
spreadMethod ( pad | reflect | repeat ) #IMPLIED
>
<!-- end of SVG.radialGradient.attlist -->]]>
<!-- stop: Stop Element ................................ -->
<!ENTITY % SVG.stop.extra.content "" >
<!ENTITY % SVG.stop.element "INCLUDE" >
<![%SVG.stop.element;[
<!ENTITY % SVG.stop.content
"( %SVG.animate.qname; | %SVG.set.qname; | %SVG.animateColor.qname;
%SVG.stop.extra.content; )*"
>
<!ELEMENT %SVG.stop.qname; %SVG.stop.content; >
<!-- end of SVG.stop.element -->]]>
<!ENTITY % SVG.stop.attlist "INCLUDE" >
<![%SVG.stop.attlist;[
<!ATTLIST %SVG.stop.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
offset %NumberOrPercentage.datatype; #REQUIRED
>
<!-- end of SVG.stop.attlist -->]]>
<!-- end of svg-gradient.mod -->
Pattern Module defines the Pattern.class element collection.
| Collection name | Elements in collection |
|---|---|
| Pattern.class | pattern |
<!-- ....................................................................... -->
<!-- SVG 1.1 Pattern Module ................................................ -->
<!-- file: svg-pattern.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Pattern//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-pattern.mod"
....................................................................... -->
<!-- Pattern
pattern
This module declares markup to provide support for pattern fill.
-->
<!-- Qualified Names (Default) ......................... -->
<!ENTITY % SVG.pattern.qname "pattern" >
<!-- Attribute Collections (Default) ................... -->
<!ENTITY % SVG.Core.attrib "" >
<!ENTITY % SVG.Container.attrib "" >
<!ENTITY % SVG.Conditional.attrib "" >
<!ENTITY % SVG.Style.attrib "" >
<!ENTITY % SVG.Viewport.attrib "" >
<!ENTITY % SVG.Text.attrib "" >
<!ENTITY % SVG.TextContent.attrib "" >
<!ENTITY % SVG.Font.attrib "" >
<!ENTITY % SVG.Paint.attrib "" >
<!ENTITY % SVG.Color.attrib "" >
<!ENTITY % SVG.Opacity.attrib "" >
<!ENTITY % SVG.Graphics.attrib "" >
<!ENTITY % SVG.Marker.attrib "" >
<!ENTITY % SVG.ColorProfile.attrib "" >
<!ENTITY % SVG.Gradient.attrib "" >
<!ENTITY % SVG.Clip.attrib "" >
<!ENTITY % SVG.Mask.attrib "" >
<!ENTITY % SVG.Filter.attrib "" >
<!ENTITY % SVG.FilterColor.attrib "" >
<!ENTITY % SVG.Cursor.attrib "" >
<!ENTITY % SVG.XLink.attrib "" >
<!ENTITY % SVG.External.attrib "" >
<!-- SVG.Pattern.class ................................. -->
<!ENTITY % SVG.Pattern.extra.class "" >
<!ENTITY % SVG.Pattern.class
"| %SVG.pattern.qname; %SVG.Pattern.extra.class;"
>
<!-- SVG.Presentation.attrib ........................... -->
<!ENTITY % SVG.Presentation.extra.attrib "" >
<!ENTITY % SVG.Presentation.attrib
"%SVG.Container.attrib;
%SVG.Viewport.attrib;
%SVG.Text.attrib;
%SVG.TextContent.attrib;
%SVG.Font.attrib;
%SVG.Paint.attrib;
%SVG.Color.attrib;
%SVG.Opacity.attrib;
%SVG.Graphics.attrib;
%SVG.Marker.attrib;
%SVG.ColorProfile.attrib;
%SVG.Gradient.attrib;
%SVG.Clip.attrib;
%SVG.Mask.attrib;
%SVG.Filter.attrib;
%SVG.FilterColor.attrib;
%SVG.Cursor.attrib;
flood-color %SVGColor.datatype; #IMPLIED
flood-opacity %OpacityValue.datatype; #IMPLIED
lighting-color %SVGColor.datatype; #IMPLIED
%SVG.Presentation.extra.attrib;"
>
<!-- pattern: Pattern Element .......................... -->
<!ENTITY % SVG.pattern.extra.content "" >
<!ENTITY % SVG.pattern.element "INCLUDE" >
<![%SVG.pattern.element;[
<!ENTITY % SVG.pattern.content
"( %SVG.Description.class; | %SVG.Animation.class; %SVG.Structure.class;
%SVG.Conditional.class; %SVG.Image.class; %SVG.Style.class;
%SVG.Shape.class; %SVG.Text.class; %SVG.Marker.class;
%SVG.ColorProfile.class; %SVG.Gradient.class; %SVG.Pattern.class;
%SVG.Clip.class; %SVG.Mask.class; %SVG.Filter.class; %SVG.Cursor.class;
%SVG.Hyperlink.class; %SVG.View.class; %SVG.Script.class;
%SVG.Font.class; %SVG.Extensibility.class; %SVG.pattern.extra.content; )*"
>
<!ELEMENT %SVG.pattern.qname; %SVG.pattern.content; >
<!-- end of SVG.pattern.element -->]]>
<!ENTITY % SVG.pattern.attlist "INCLUDE" >
<![%SVG.pattern.attlist;[
<!ATTLIST %SVG.pattern.qname;
%SVG.Core.attrib;
%SVG.Conditional.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.XLink.attrib;
%SVG.External.attrib;
x %Coordinate.datatype; #IMPLIED
y %Coordinate.datatype; #IMPLIED
width %Length.datatype; #IMPLIED
height %Length.datatype; #IMPLIED
patternUnits ( userSpaceOnUse | objectBoundingBox ) #IMPLIED
patternContentUnits ( userSpaceOnUse | objectBoundingBox ) #IMPLIED
patternTransform %TransformList.datatype; #IMPLIED
viewBox %ViewBoxSpec.datatype; #IMPLIED
preserveAspectRatio %PreserveAspectRatioSpec.datatype; 'xMidYMid meet'
>
<!-- end of SVG.pattern.attlist -->]]>
<!-- end of svg-pattern.mod -->
Clip Module defines the Clip.class element collection and the Clip.attrib attribute collection.
| Collection name | Elements in collection |
|---|---|
| Clip.class | clipPath |
| Collection name | Attributes in collection |
|---|---|
| Clip.attrib | clip-path, clip-rule |
<!-- ....................................................................... -->
<!-- SVG 1.1 Clip Module ................................................... -->
<!-- file: svg-clip.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Clip//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-clip.mod"
....................................................................... -->
<!-- Clip
clipPath
This module declares markup to provide support for clipping.
-->
<!-- 'clip-path' property/attribute value (тобто, 'none', <uri>) -->
<!ENTITY % ClipPathValue.datatype "CDATA" >
<!-- Qualified Names (Default) ......................... -->
<!ENTITY % SVG.clipPath.qname "clipPath" >
<!-- Attribute Collections (Default) ................... -->
<!ENTITY % SVG.Core.attrib "" >
<!ENTITY % SVG.Conditional.attrib "" >
<!ENTITY % SVG.Style.attrib "" >
<!ENTITY % SVG.Text.attrib "" >
<!ENTITY % SVG.TextContent.attrib "" >
<!ENTITY % SVG.Font.attrib "" >
<!ENTITY % SVG.Paint.attrib "" >
<!ENTITY % SVG.Color.attrib "" >
<!ENTITY % SVG.Opacity.attrib "" >
<!ENTITY % SVG.Graphics.attrib "" >
<!ENTITY % SVG.Mask.attrib "" >
<!ENTITY % SVG.Filter.attrib "" >
<!ENTITY % SVG.Cursor.attrib "" >
<!ENTITY % SVG.External.attrib "" >
<!-- SVG.Clip.class .................................... -->
<!ENTITY % SVG.Clip.extra.class "" >
<!ENTITY % SVG.Clip.class
"| %SVG.clipPath.qname; %SVG.Clip.extra.class;"
>
<!-- SVG.Clip.attrib ................................... -->
<!ENTITY % SVG.Clip.extra.attrib "" >
<!ENTITY % SVG.Clip.attrib
"clip-path %ClipPathValue.datatype; #IMPLIED
clip-rule %ClipFillRule.datatype; #IMPLIED
%SVG.Clip.extra.attrib;"
>
<!-- clipPath: Clip Path Element ....................... -->
<!ENTITY % SVG.clipPath.extra.content "" >
<!ENTITY % SVG.clipPath.element "INCLUDE" >
<![%SVG.clipPath.element;[
<!ENTITY % SVG.clipPath.content
"( %SVG.Description.class; | %SVG.Animation.class; %SVG.Use.class;
%SVG.Shape.class; | %SVG.text.qname; %SVG.clipPath.extra.content; )*"
>
<!ELEMENT %SVG.clipPath.qname; %SVG.clipPath.content; >
<!-- end of SVG.clipPath.element -->]]>
<!ENTITY % SVG.clipPath.attlist "INCLUDE" >
<![%SVG.clipPath.attlist;[
<!ATTLIST %SVG.clipPath.qname;
%SVG.Core.attrib;
%SVG.Conditional.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.External.attrib;
transform %TransformList.datatype; #IMPLIED
clipPathUnits ( userSpaceOnUse | objectBoundingBox ) #IMPLIED
>
<!-- end of SVG.clipPath.attlist -->]]>
<!-- end of svg-clip.mod -->
Basic Clip Module defines the Clip.class element collection and the Clip.attrib attribute collection.
| Collection name | Elements in collection |
|---|---|
| Clip.class | clipPath |
| Collection name | Attributes in collection |
|---|---|
| Clip.attrib | clip-path, clip-rule |
<!-- ....................................................................... -->
<!-- SVG 1.1 Basic Clip Module ............................................. -->
<!-- file: svg-basic-clip.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Basic Clip//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-basic-clip.mod"
....................................................................... -->
<!-- Basic Clip
clipPath
This module declares markup to provide support for clipping.
-->
<!-- 'clip-path' property/attribute value (тобто, 'none', <uri>) -->
<!ENTITY % ClipPathValue.datatype "CDATA" >
<!-- Qualified Names (Default) ......................... -->
<!ENTITY % SVG.clipPath.qname "clipPath" >
<!-- Attribute Collections (Default) ................... -->
<!ENTITY % SVG.Core.attrib "" >
<!ENTITY % SVG.Conditional.attrib "" >
<!ENTITY % SVG.Style.attrib "" >
<!ENTITY % SVG.Text.attrib "" >
<!ENTITY % SVG.TextContent.attrib "" >
<!ENTITY % SVG.Font.attrib "" >
<!ENTITY % SVG.Paint.attrib "" >
<!ENTITY % SVG.Color.attrib "" >
<!ENTITY % SVG.Opacity.attrib "" >
<!ENTITY % SVG.Graphics.attrib "" >
<!ENTITY % SVG.Mask.attrib "" >
<!ENTITY % SVG.Filter.attrib "" >
<!ENTITY % SVG.Cursor.attrib "" >
<!ENTITY % SVG.External.attrib "" >
<!-- SVG.Clip.class .................................... -->
<!ENTITY % SVG.Clip.extra.class "" >
<!ENTITY % SVG.Clip.class
"| %SVG.clipPath.qname; %SVG.Clip.extra.class;"
>
<!-- SVG.Clip.attrib ................................... -->
<!ENTITY % SVG.Clip.extra.attrib "" >
<!ENTITY % SVG.Clip.attrib
"clip-path %ClipPathValue.datatype; #IMPLIED
clip-rule %ClipFillRule.datatype; #IMPLIED
%SVG.Clip.extra.attrib;"
>
<!-- clipPath: Clip Path Element ....................... -->
<!ENTITY % SVG.clipPath.extra.content "" >
<!ENTITY % SVG.clipPath.element "INCLUDE" >
<![%SVG.clipPath.element;[
<!ENTITY % SVG.clipPath.content
"( %SVG.Description.class; | %SVG.Animation.class; %SVG.Use.class;
%SVG.Shape.class; | %SVG.text.qname; %SVG.clipPath.extra.content; )*"
>
<!ELEMENT %SVG.clipPath.qname; %SVG.clipPath.content; >
<!-- end of SVG.clipPath.element -->]]>
<!ENTITY % SVG.clipPath.attlist "INCLUDE" >
<![%SVG.clipPath.attlist;[
<!ATTLIST %SVG.clipPath.qname;
%SVG.Core.attrib;
%SVG.Conditional.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.External.attrib;
transform %TransformList.datatype; #IMPLIED
clipPathUnits ( userSpaceOnUse | objectBoundingBox ) #IMPLIED
>
<!-- end of SVG.clipPath.attlist -->]]>
<!-- end of svg-basic-clip.mod -->
Mask Module defines the Mask.class element collection and the Mask.attrib attribute collection.
| Collection name | Elements in collection |
|---|---|
| Mask.class | mask |
| Collection name | Attributes in collection |
|---|---|
| Mask.attrib | mask |
<!-- ....................................................................... -->
<!-- SVG 1.1 Mask Module ................................................... -->
<!-- file: svg-mask.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Mask//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-mask.mod"
....................................................................... -->
<!-- Mask
mask
This module declares markup to provide support for masking.
-->
<!-- 'mask' property/attribute value (тобто, 'none', <uri>) -->
<!ENTITY % MaskValue.datatype "CDATA" >
<!-- Qualified Names (Default) ......................... -->
<!ENTITY % SVG.mask.qname "mask" >
<!-- Attribute Collections (Default) ................... -->
<!ENTITY % SVG.Core.attrib "" >
<!ENTITY % SVG.Container.attrib "" >
<!ENTITY % SVG.Conditional.attrib "" >
<!ENTITY % SVG.Style.attrib "" >
<!ENTITY % SVG.Viewport.attrib "" >
<!ENTITY % SVG.Text.attrib "" >
<!ENTITY % SVG.TextContent.attrib "" >
<!ENTITY % SVG.Font.attrib "" >
<!ENTITY % SVG.Paint.attrib "" >
<!ENTITY % SVG.Color.attrib "" >
<!ENTITY % SVG.Opacity.attrib "" >
<!ENTITY % SVG.Graphics.attrib "" >
<!ENTITY % SVG.Marker.attrib "" >
<!ENTITY % SVG.ColorProfile.attrib "" >
<!ENTITY % SVG.Gradient.attrib "" >
<!ENTITY % SVG.Clip.attrib "" >
<!ENTITY % SVG.Filter.attrib "" >
<!ENTITY % SVG.FilterColor.attrib "" >
<!ENTITY % SVG.Cursor.attrib "" >
<!ENTITY % SVG.External.attrib "" >
<!-- SVG.Mask.class .................................... -->
<!ENTITY % SVG.Mask.extra.class "" >
<!ENTITY % SVG.Mask.class
"| %SVG.mask.qname; %SVG.Mask.extra.class;"
>
<!-- SVG.Mask.attrib ................................... -->
<!ENTITY % SVG.Mask.extra.attrib "" >
<!ENTITY % SVG.Mask.attrib
"mask %MaskValue.datatype; #IMPLIED
%SVG.Mask.extra.attrib;"
>
<!-- SVG.Presentation.attrib ........................... -->
<!ENTITY % SVG.Presentation.extra.attrib "" >
<!ENTITY % SVG.Presentation.attrib
"%SVG.Container.attrib;
%SVG.Viewport.attrib;
%SVG.Text.attrib;
%SVG.TextContent.attrib;
%SVG.Font.attrib;
%SVG.Paint.attrib;
%SVG.Color.attrib;
%SVG.Opacity.attrib;
%SVG.Graphics.attrib;
%SVG.Marker.attrib;
%SVG.ColorProfile.attrib;
%SVG.Gradient.attrib;
%SVG.Clip.attrib;
%SVG.Mask.attrib;
%SVG.Filter.attrib;
%SVG.FilterColor.attrib;
%SVG.Cursor.attrib;
flood-color %SVGColor.datatype; #IMPLIED
flood-opacity %OpacityValue.datatype; #IMPLIED
lighting-color %SVGColor.datatype; #IMPLIED
%SVG.Presentation.extra.attrib;"
>
<!-- mask: Mask Element ................................ -->
<!ENTITY % SVG.mask.extra.content "" >
<!ENTITY % SVG.mask.element "INCLUDE" >
<![%SVG.mask.element;[
<!ENTITY % SVG.mask.content
"( %SVG.Description.class; | %SVG.Animation.class; %SVG.Structure.class;
%SVG.Conditional.class; %SVG.Image.class; %SVG.Style.class;
%SVG.Shape.class; %SVG.Text.class; %SVG.Marker.class;
%SVG.ColorProfile.class; %SVG.Gradient.class; %SVG.Pattern.class;
%SVG.Clip.class; %SVG.Mask.class; %SVG.Filter.class; %SVG.Cursor.class;
%SVG.Hyperlink.class; %SVG.View.class; %SVG.Script.class;
%SVG.Font.class; %SVG.Extensibility.class; %SVG.mask.extra.content; )*"
>
<!ELEMENT %SVG.mask.qname; %SVG.mask.content; >
<!-- end of SVG.mask.element -->]]>
<!ENTITY % SVG.mask.attlist "INCLUDE" >
<![%SVG.mask.attlist;[
<!ATTLIST %SVG.mask.qname;
%SVG.Core.attrib;
%SVG.Conditional.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.External.attrib;
x %Coordinate.datatype; #IMPLIED
y %Coordinate.datatype; #IMPLIED
width %Length.datatype; #IMPLIED
height %Length.datatype; #IMPLIED
maskUnits ( userSpaceOnUse | objectBoundingBox ) #IMPLIED
maskContentUnits ( userSpaceOnUse | objectBoundingBox ) #IMPLIED
>
<!-- end of SVG.mask.attlist -->]]>
<!-- end of svg-mask.mod -->
Filter Module defines the Filter.class and FilterPrimitive.class element collections and the Filter.attrib, FilterColor.attrib, FilterPrimitive.attrib and FilterPrimitiveWithIn.attrib attribute collections.
| Collection name | Elements in collection |
|---|---|
| Filter.class | filter |
| FilterPrimitive.class | feBlend, feFlood, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feGaussianBlur, feImage, feMerge, feMorphology, feOffset, feSpecularLighting, feTile, feTurbulence |
| Collection name | Attributes in collection |
|---|---|
| Filter.attrib | filter |
| FilterColor.attrib | color-interpolation-filters |
| FilterPrimitive.attrib | x, y, width, height, result |
| FilterPrimitiveWithIn.attrib | FilterPrimitive.attrib, in |
<!-- ....................................................................... -->
<!-- SVG 1.1 Filter Module ................................................. -->
<!-- file: svg-filter.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Filter//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-filter.mod"
....................................................................... -->
<!-- Filter
filter, feBlend, feColorMatrix, feComponentTransfer, feComposite,
feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feFlood,
feGaussianBlur, feImage, feMerge, feMergeNode, feMorphology, feOffset,
feSpecularLighting, feTile, feTurbulence, feDistantLight, fePointLight,
feSpotLight, feFuncR, feFuncG, feFuncB, feFuncA
This module declares markup to provide support for filter effect.
-->
<!-- 'filter' property/attribute value (тобто, 'none', <uri>) -->
<!ENTITY % FilterValue.datatype "CDATA" >
<!-- list of <number>s, but at least one and at most two -->
<!ENTITY % NumberOptionalNumber.datatype "CDATA" >
<!-- Qualified Names (Default) ......................... -->
<!ENTITY % SVG.filter.qname "filter" >
<!ENTITY % SVG.feBlend.qname "feBlend" >
<!ENTITY % SVG.feColorMatrix.qname "feColorMatrix" >
<!ENTITY % SVG.feComponentTransfer.qname "feComponentTransfer" >
<!ENTITY % SVG.feComposite.qname "feComposite" >
<!ENTITY % SVG.feConvolveMatrix.qname "feConvolveMatrix" >
<!ENTITY % SVG.feDiffuseLighting.qname "feDiffuseLighting" >
<!ENTITY % SVG.feDisplacementMap.qname "feDisplacementMap" >
<!ENTITY % SVG.feFlood.qname "feFlood" >
<!ENTITY % SVG.feGaussianBlur.qname "feGaussianBlur" >
<!ENTITY % SVG.feImage.qname "feImage" >
<!ENTITY % SVG.feMerge.qname "feMerge" >
<!ENTITY % SVG.feMergeNode.qname "feMergeNode" >
<!ENTITY % SVG.feMorphology.qname "feMorphology" >
<!ENTITY % SVG.feOffset.qname "feOffset" >
<!ENTITY % SVG.feSpecularLighting.qname "feSpecularLighting" >
<!ENTITY % SVG.feTile.qname "feTile" >
<!ENTITY % SVG.feTurbulence.qname "feTurbulence" >
<!ENTITY % SVG.feDistantLight.qname "feDistantLight" >
<!ENTITY % SVG.fePointLight.qname "fePointLight" >
<!ENTITY % SVG.feSpotLight.qname "feSpotLight" >
<!ENTITY % SVG.feFuncR.qname "feFuncR" >
<!ENTITY % SVG.feFuncG.qname "feFuncG" >
<!ENTITY % SVG.feFuncB.qname "feFuncB" >
<!ENTITY % SVG.feFuncA.qname "feFuncA" >
<!-- Attribute Collections (Default) ................... -->
<!ENTITY % SVG.Core.attrib "" >
<!ENTITY % SVG.Container.attrib "" >
<!ENTITY % SVG.Style.attrib "" >
<!ENTITY % SVG.Viewport.attrib "" >
<!ENTITY % SVG.Text.attrib "" >
<!ENTITY % SVG.TextContent.attrib "" >
<!ENTITY % SVG.Font.attrib "" >
<!ENTITY % SVG.Paint.attrib "" >
<!ENTITY % SVG.Color.attrib "" >
<!ENTITY % SVG.Opacity.attrib "" >
<!ENTITY % SVG.Graphics.attrib "" >
<!ENTITY % SVG.Marker.attrib "" >
<!ENTITY % SVG.ColorProfile.attrib "" >
<!ENTITY % SVG.Gradient.attrib "" >
<!ENTITY % SVG.Clip.attrib "" >
<!ENTITY % SVG.Mask.attrib "" >
<!ENTITY % SVG.Cursor.attrib "" >
<!ENTITY % SVG.XLink.attrib "" >
<!ENTITY % SVG.XLinkEmbed.attrib "" >
<!ENTITY % SVG.External.attrib "" >
<!-- SVG.Filter.class .................................. -->
<!ENTITY % SVG.Filter.extra.class "" >
<!ENTITY % SVG.Filter.class
"| %SVG.filter.qname; %SVG.Filter.extra.class;"
>
<!-- SVG.FilterPrimitive.class ......................... -->
<!ENTITY % SVG.FilterPrimitive.extra.class "" >
<!ENTITY % SVG.FilterPrimitive.class
"| %SVG.feBlend.qname; | %SVG.feColorMatrix.qname;
| %SVG.feComponentTransfer.qname; | %SVG.feComposite.qname;
| %SVG.feConvolveMatrix.qname; | %SVG.feDiffuseLighting.qname;
| %SVG.feDisplacementMap.qname; | %SVG.feFlood.qname;
| %SVG.feGaussianBlur.qname; | %SVG.feImage.qname; | %SVG.feMerge.qname;
| %SVG.feMorphology.qname; | %SVG.feOffset.qname;
| %SVG.feSpecularLighting.qname; | %SVG.feTile.qname;
| %SVG.feTurbulence.qname; %SVG.FilterPrimitive.extra.class;"
>
<!-- SVG.Filter.attrib ................................. -->
<!ENTITY % SVG.Filter.extra.attrib "" >
<!ENTITY % SVG.Filter.attrib
"filter %FilterValue.datatype; #IMPLIED
%SVG.Filter.extra.attrib;"
>
<!-- SVG.FilterColor.attrib ............................ -->
<!ENTITY % SVG.FilterColor.extra.attrib "" >
<!ENTITY % SVG.FilterColor.attrib
"color-interpolation-filters ( auto | sRGB | linearRGB | inherit )
#IMPLIED
%SVG.FilterColor.extra.attrib;"
>
<!-- SVG.FilterPrimitive.attrib ........................ -->
<!ENTITY % SVG.FilterPrimitive.extra.attrib "" >
<!ENTITY % SVG.FilterPrimitive.attrib
"x %Coordinate.datatype; #IMPLIED
y %Coordinate.datatype; #IMPLIED
width %Length.datatype; #IMPLIED
height %Length.datatype; #IMPLIED
result CDATA #IMPLIED
%SVG.FilterPrimitive.extra.attrib;"
>
<!-- SVG.FilterPrimitiveWithIn.attrib .................. -->
<!ENTITY % SVG.FilterPrimitiveWithIn.extra.attrib "" >
<!ENTITY % SVG.FilterPrimitiveWithIn.attrib
"%SVG.FilterPrimitive.attrib;
in CDATA #IMPLIED
%SVG.FilterPrimitiveWithIn.extra.attrib;"
>
<!-- SVG.Presentation.attrib ........................... -->
<!ENTITY % SVG.Presentation.extra.attrib "" >
<!ENTITY % SVG.Presentation.attrib
"%SVG.Container.attrib;
%SVG.Viewport.attrib;
%SVG.Text.attrib;
%SVG.TextContent.attrib;
%SVG.Font.attrib;
%SVG.Paint.attrib;
%SVG.Color.attrib;
%SVG.Opacity.attrib;
%SVG.Graphics.attrib;
%SVG.Marker.attrib;
%SVG.ColorProfile.attrib;
%SVG.Gradient.attrib;
%SVG.Clip.attrib;
%SVG.Mask.attrib;
%SVG.Filter.attrib;
%SVG.FilterColor.attrib;
%SVG.Cursor.attrib;
flood-color %SVGColor.datatype; #IMPLIED
flood-opacity %OpacityValue.datatype; #IMPLIED
lighting-color %SVGColor.datatype; #IMPLIED
%SVG.Presentation.extra.attrib;"
>
<!-- filter: Filter Element ............................ -->
<!ENTITY % SVG.filter.extra.content "" >
<!ENTITY % SVG.filter.element "INCLUDE" >
<![%SVG.filter.element;[
<!ENTITY % SVG.filter.content
"( %SVG.Description.class; | %SVG.animate.qname; | %SVG.set.qname;
%SVG.FilterPrimitive.class; %SVG.filter.extra.content; )*"
>
<!ELEMENT %SVG.filter.qname; %SVG.filter.content; >
<!-- end of SVG.filter.element -->]]>
<!ENTITY % SVG.filter.attlist "INCLUDE" >
<![%SVG.filter.attlist;[
<!ATTLIST %SVG.filter.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.XLink.attrib;
%SVG.External.attrib;
x %Coordinate.datatype; #IMPLIED
y %Coordinate.datatype; #IMPLIED
width %Length.datatype; #IMPLIED
height %Length.datatype; #IMPLIED
filterRes %NumberOptionalNumber.datatype; #IMPLIED
filterUnits ( userSpaceOnUse | objectBoundingBox ) #IMPLIED
primitiveUnits ( userSpaceOnUse | objectBoundingBox ) #IMPLIED
>
<!-- end of SVG.filter.attlist -->]]>
<!-- feBlend: Filter Effect Blend Element .............. -->
<!ENTITY % SVG.feBlend.extra.content "" >
<!ENTITY % SVG.feBlend.element "INCLUDE" >
<![%SVG.feBlend.element;[
<!ENTITY % SVG.feBlend.content
"( %SVG.animate.qname; | %SVG.set.qname; %SVG.feBlend.extra.content; )*"
>
<!ELEMENT %SVG.feBlend.qname; %SVG.feBlend.content; >
<!-- end of SVG.feBlend.element -->]]>
<!ENTITY % SVG.feBlend.attlist "INCLUDE" >
<![%SVG.feBlend.attlist;[
<!ATTLIST %SVG.feBlend.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.FilterPrimitiveWithIn.attrib;
in2 CDATA #REQUIRED
mode ( normal | multiply | screen | darken | lighten ) 'normal'
>
<!-- end of SVG.feBlend.attlist -->]]>
<!-- feColorMatrix: Filter Effect Color Matrix Element . -->
<!ENTITY % SVG.feColorMatrix.extra.content "" >
<!ENTITY % SVG.feColorMatrix.element "INCLUDE" >
<![%SVG.feColorMatrix.element;[
<!ENTITY % SVG.feColorMatrix.content
"( %SVG.animate.qname; | %SVG.set.qname;
%SVG.feColorMatrix.extra.content; )*"
>
<!ELEMENT %SVG.feColorMatrix.qname; %SVG.feColorMatrix.content; >
<!-- end of SVG.feColorMatrix.element -->]]>
<!ENTITY % SVG.feColorMatrix.attlist "INCLUDE" >
<![%SVG.feColorMatrix.attlist;[
<!ATTLIST %SVG.feColorMatrix.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.FilterPrimitiveWithIn.attrib;
type ( matrix | saturate | hueRotate | luminanceToAlpha ) 'matrix'
values CDATA #IMPLIED
>
<!-- end of SVG.feColorMatrix.attlist -->]]>
<!-- feComponentTransfer: Filter Effect Component Transfer Element -->
<!ENTITY % SVG.feComponentTransfer.extra.content "" >
<!ENTITY % SVG.feComponentTransfer.element "INCLUDE" >
<![%SVG.feComponentTransfer.element;[
<!ENTITY % SVG.feComponentTransfer.content
"( %SVG.feFuncR.qname;?, %SVG.feFuncG.qname;?, %SVG.feFuncB.qname;?,
%SVG.feFuncA.qname;? %SVG.feComponentTransfer.extra.content; )"
>
<!ELEMENT %SVG.feComponentTransfer.qname; %SVG.feComponentTransfer.content; >
<!-- end of SVG.feComponentTransfer.element -->]]>
<!ENTITY % SVG.feComponentTransfer.attlist "INCLUDE" >
<![%SVG.feComponentTransfer.attlist;[
<!ATTLIST %SVG.feComponentTransfer.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.FilterPrimitiveWithIn.attrib;
>
<!-- end of SVG.feComponentTransfer.attlist -->]]>
<!-- feComposite: Filter Effect Composite Element ...... -->
<!ENTITY % SVG.feComposite.extra.content "" >
<!ENTITY % SVG.feComposite.element "INCLUDE" >
<![%SVG.feComposite.element;[
<!ENTITY % SVG.feComposite.content
"( %SVG.animate.qname; | %SVG.set.qname; %SVG.feComposite.extra.content; )*"
>
<!ELEMENT %SVG.feComposite.qname; %SVG.feComposite.content; >
<!-- end of SVG.feComposite.element -->]]>
<!ENTITY % SVG.feComposite.attlist "INCLUDE" >
<![%SVG.feComposite.attlist;[
<!ATTLIST %SVG.feComposite.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.FilterPrimitiveWithIn.attrib;
in2 CDATA #REQUIRED
operator ( over | in | out | atop | xor | arithmetic ) 'over'
k1 %Number.datatype; #IMPLIED
k2 %Number.datatype; #IMPLIED
k3 %Number.datatype; #IMPLIED
k4 %Number.datatype; #IMPLIED
>
<!-- end of SVG.feComposite.attlist -->]]>
<!-- feConvolveMatrix: Filter Effect Convolve Matrix Element -->
<!ENTITY % SVG.feConvolveMatrix.extra.content "" >
<!ENTITY % SVG.feConvolveMatrix.element "INCLUDE" >
<![%SVG.feConvolveMatrix.element;[
<!ENTITY % SVG.feConvolveMatrix.content
"( %SVG.animate.qname; | %SVG.set.qname;
%SVG.feConvolveMatrix.extra.content; )*"
>
<!ELEMENT %SVG.feConvolveMatrix.qname; %SVG.feConvolveMatrix.content; >
<!-- end of SVG.feConvolveMatrix.element -->]]>
<!ENTITY % SVG.feConvolveMatrix.attlist "INCLUDE" >
<![%SVG.feConvolveMatrix.attlist;[
<!ATTLIST %SVG.feConvolveMatrix.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.FilterPrimitiveWithIn.attrib;
order %NumberOptionalNumber.datatype; #IMPLIED
kernelMatrix CDATA #REQUIRED
divisor %Number.datatype; #IMPLIED
bias %Number.datatype; #IMPLIED
targetX %Integer.datatype; #IMPLIED
targetY %Integer.datatype; #IMPLIED
edgeMode ( duplicate | wrap | none ) 'duplicate'
kernelUnitLength %NumberOptionalNumber.datatype; #IMPLIED
preserveAlpha %Boolean.datatype; #IMPLIED
>
<!-- end of SVG.feConvolveMatrix.attlist -->]]>
<!-- feDiffuseLighting: Filter Effect Diffuse Lighting Element -->
<!ENTITY % SVG.feDiffuseLighting.extra.content "" >
<!ENTITY % SVG.feDiffuseLighting.element "INCLUDE" >
<![%SVG.feDiffuseLighting.element;[
<!ENTITY % SVG.feDiffuseLighting.content
"(( %SVG.feDistantLight.qname; | %SVG.fePointLight.qname;
| %SVG.feSpotLight.qname; ), ( %SVG.animate.qname; | %SVG.set.qname;
| %SVG.animateColor.qname; %SVG.feDiffuseLighting.extra.content; )*)"
>
<!ELEMENT %SVG.feDiffuseLighting.qname; %SVG.feDiffuseLighting.content; >
<!-- end of SVG.feDiffuseLighting.element -->]]>
<!ENTITY % SVG.feDiffuseLighting.attlist "INCLUDE" >
<![%SVG.feDiffuseLighting.attlist;[
<!ATTLIST %SVG.feDiffuseLighting.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.FilterPrimitiveWithIn.attrib;
surfaceScale %Number.datatype; #IMPLIED
diffuseConstant %Number.datatype; #IMPLIED
kernelUnitLength %NumberOptionalNumber.datatype; #IMPLIED
>
<!-- end of SVG.feDiffuseLighting.attlist -->]]>
<!-- feDisplacementMap: Filter Effect Displacement Map Element -->
<!ENTITY % SVG.feDisplacementMap.extra.content "" >
<!ENTITY % SVG.feDisplacementMap.element "INCLUDE" >
<![%SVG.feDisplacementMap.element;[
<!ENTITY % SVG.feDisplacementMap.content
"( %SVG.animate.qname; | %SVG.set.qname;
%SVG.feDisplacementMap.extra.content; )*"
>
<!ELEMENT %SVG.feDisplacementMap.qname; %SVG.feDisplacementMap.content; >
<!-- end of SVG.feDisplacementMap.element -->]]>
<!ENTITY % SVG.feDisplacementMap.attlist "INCLUDE" >
<![%SVG.feDisplacementMap.attlist;[
<!ATTLIST %SVG.feDisplacementMap.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.FilterPrimitiveWithIn.attrib;
in2 CDATA #REQUIRED
scale %Number.datatype; #IMPLIED
xChannelSelector ( R | G | B | A ) 'A'
yChannelSelector ( R | G | B | A ) 'A'
>
<!-- end of SVG.feDisplacementMap.attlist -->]]>
<!-- feFlood: Filter Effect Flood Element .............. -->
<!ENTITY % SVG.feFlood.extra.content "" >
<!ENTITY % SVG.feFlood.element "INCLUDE" >
<![%SVG.feFlood.element;[
<!ENTITY % SVG.feFlood.content
"( %SVG.animate.qname; | %SVG.set.qname; | %SVG.animateColor.qname;
%SVG.feFlood.extra.content; )*"
>
<!ELEMENT %SVG.feFlood.qname; %SVG.feFlood.content; >
<!-- end of SVG.feFlood.element -->]]>
<!ENTITY % SVG.feFlood.attlist "INCLUDE" >
<![%SVG.feFlood.attlist;[
<!ATTLIST %SVG.feFlood.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.FilterPrimitive.attrib;
>
<!-- end of SVG.feFlood.attlist -->]]>
<!-- feGaussianBlur: Filter Effect Gaussian Blur Element -->
<!ENTITY % SVG.feGaussianBlur.extra.content "" >
<!ENTITY % SVG.feGaussianBlur.element "INCLUDE" >
<![%SVG.feGaussianBlur.element;[
<!ENTITY % SVG.feGaussianBlur.content
"( %SVG.animate.qname; | %SVG.set.qname;
%SVG.feGaussianBlur.extra.content; )*"
>
<!ELEMENT %SVG.feGaussianBlur.qname; %SVG.feGaussianBlur.content; >
<!-- end of SVG.feGaussianBlur.element -->]]>
<!ENTITY % SVG.feGaussianBlur.attlist "INCLUDE" >
<![%SVG.feGaussianBlur.attlist;[
<!ATTLIST %SVG.feGaussianBlur.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.FilterPrimitiveWithIn.attrib;
stdDeviation %NumberOptionalNumber.datatype; #IMPLIED
>
<!-- end of SVG.feGaussianBlur.attlist -->]]>
<!-- feImage: Filter Effect Image Element .............. -->
<!ENTITY % SVG.feImage.extra.content "" >
<!ENTITY % SVG.feImage.element "INCLUDE" >
<![%SVG.feImage.element;[
<!ENTITY % SVG.feImage.content
"( %SVG.animate.qname; | %SVG.set.qname; | %SVG.animateTransform.qname;
%SVG.feImage.extra.content; )*"
>
<!ELEMENT %SVG.feImage.qname; %SVG.feImage.content; >
<!-- end of SVG.feImage.element -->]]>
<!ENTITY % SVG.feImage.attlist "INCLUDE" >
<![%SVG.feImage.attlist;[
<!ATTLIST %SVG.feImage.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.FilterPrimitive.attrib;
%SVG.XLinkEmbed.attrib;
%SVG.External.attrib;
preserveAspectRatio %PreserveAspectRatioSpec.datatype; 'xMidYMid meet'
>
<!-- end of SVG.feImage.attlist -->]]>
<!-- feMerge: Filter Effect Merge Element .............. -->
<!ENTITY % SVG.feMerge.extra.content "" >
<!ENTITY % SVG.feMerge.element "INCLUDE" >
<![%SVG.feMerge.element;[
<!ENTITY % SVG.feMerge.content
"( %SVG.feMergeNode.qname; %SVG.feMerge.extra.content; )*"
>
<!ELEMENT %SVG.feMerge.qname; %SVG.feMerge.content; >
<!-- end of SVG.feMerge.element -->]]>
<!ENTITY % SVG.feMerge.attlist "INCLUDE" >
<![%SVG.feMerge.attlist;[
<!ATTLIST %SVG.feMerge.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.FilterPrimitive.attrib;
>
<!-- end of SVG.feMerge.attlist -->]]>
<!-- feMergeNode: Filter Effect Merge Node Element ..... -->
<!ENTITY % SVG.feMergeNode.extra.content "" >
<!ENTITY % SVG.feMergeNode.element "INCLUDE" >
<![%SVG.feMergeNode.element;[
<!ENTITY % SVG.feMergeNode.content
"( %SVG.animate.qname; | %SVG.set.qname; %SVG.feMergeNode.extra.content; )*"
>
<!ELEMENT %SVG.feMergeNode.qname; %SVG.feMergeNode.content; >
<!-- end of SVG.feMergeNode.element -->]]>
<!ENTITY % SVG.feMergeNode.attlist "INCLUDE" >
<![%SVG.feMergeNode.attlist;[
<!ATTLIST %SVG.feMergeNode.qname;
%SVG.Core.attrib;
in CDATA #IMPLIED
>
<!-- end of SVG.feMergeNode.attlist -->]]>
<!-- feMorphology: Filter Effect Morphology Element .... -->
<!ENTITY % SVG.feMorphology.extra.content "" >
<!ENTITY % SVG.feMorphology.element "INCLUDE" >
<![%SVG.feMorphology.element;[
<!ENTITY % SVG.feMorphology.content
"( %SVG.animate.qname; | %SVG.set.qname;
%SVG.feMorphology.extra.content; )*"
>
<!ELEMENT %SVG.feMorphology.qname; %SVG.feMorphology.content; >
<!-- end of SVG.feMorphology.element -->]]>
<!ENTITY % SVG.feMorphology.attlist "INCLUDE" >
<![%SVG.feMorphology.attlist;[
<!ATTLIST %SVG.feMorphology.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.FilterPrimitiveWithIn.attrib;
operator ( erode | dilate ) 'erode'
radius %NumberOptionalNumber.datatype; #IMPLIED
>
<!-- end of SVG.feMorphology.attlist -->]]>
<!-- feOffset: Filter Effect Offset Element ............ -->
<!ENTITY % SVG.feOffset.extra.content "" >
<!ENTITY % SVG.feOffset.element "INCLUDE" >
<![%SVG.feOffset.element;[
<!ENTITY % SVG.feOffset.content
"( %SVG.animate.qname; | %SVG.set.qname; %SVG.feOffset.extra.content; )*"
>
<!ELEMENT %SVG.feOffset.qname; %SVG.feOffset.content; >
<!-- end of SVG.feOffset.element -->]]>
<!ENTITY % SVG.feOffset.attlist "INCLUDE" >
<![%SVG.feOffset.attlist;[
<!ATTLIST %SVG.feOffset.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.FilterPrimitiveWithIn.attrib;
dx %Number.datatype; #IMPLIED
dy %Number.datatype; #IMPLIED
>
<!-- end of SVG.feOffset.attlist -->]]>
<!-- feSpecularLighting: Filter Effect Specular Lighting Element -->
<!ENTITY % SVG.feSpecularLighting.extra.content "" >
<!ENTITY % SVG.feSpecularLighting.element "INCLUDE" >
<![%SVG.feSpecularLighting.element;[
<!ENTITY % SVG.feSpecularLighting.content
"(( %SVG.feDistantLight.qname; | %SVG.fePointLight.qname;
| %SVG.feSpotLight.qname; ), ( %SVG.animate.qname; | %SVG.set.qname;
| %SVG.animateColor.qname; %SVG.feSpecularLighting.extra.content; )*)"
>
<!ELEMENT %SVG.feSpecularLighting.qname; %SVG.feSpecularLighting.content; >
<!-- end of SVG.feSpecularLighting.element -->]]>
<!ENTITY % SVG.feSpecularLighting.attlist "INCLUDE" >
<![%SVG.feSpecularLighting.attlist;[
<!ATTLIST %SVG.feSpecularLighting.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.FilterPrimitiveWithIn.attrib;
surfaceScale %Number.datatype; #IMPLIED
specularConstant %Number.datatype; #IMPLIED
specularExponent %Number.datatype; #IMPLIED
kernelUnitLength %NumberOptionalNumber.datatype; #IMPLIED
>
<!-- end of SVG.feSpecularLighting.attlist -->]]>
<!-- feTile: Filter Effect Tile Element ................ -->
<!ENTITY % SVG.feTile.extra.content "" >
<!ENTITY % SVG.feTile.element "INCLUDE" >
<![%SVG.feTile.element;[
<!ENTITY % SVG.feTile.content
"( %SVG.animate.qname; | %SVG.set.qname; %SVG.feTile.extra.content; )*"
>
<!ELEMENT %SVG.feTile.qname; %SVG.feTile.content; >
<!-- end of SVG.feTile.element -->]]>
<!ENTITY % SVG.feTile.attlist "INCLUDE" >
<![%SVG.feTile.attlist;[
<!ATTLIST %SVG.feTile.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.FilterPrimitiveWithIn.attrib;
>
<!-- end of SVG.feTile.attlist -->]]>
<!-- feTurbulence: Filter Effect Turbulence Element .... -->
<!ENTITY % SVG.feTurbulence.extra.content "" >
<!ENTITY % SVG.feTurbulence.element "INCLUDE" >
<![%SVG.feTurbulence.element;[
<!ENTITY % SVG.feTurbulence.content
"( %SVG.animate.qname; | %SVG.set.qname;
%SVG.feTurbulence.extra.content; )*"
>
<!ELEMENT %SVG.feTurbulence.qname; %SVG.feTurbulence.content; >
<!-- end of SVG.feTurbulence.element -->]]>
<!ENTITY % SVG.feTurbulence.attlist "INCLUDE" >
<![%SVG.feTurbulence.attlist;[
<!ATTLIST %SVG.feTurbulence.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.FilterPrimitive.attrib;
baseFrequency %NumberOptionalNumber.datatype; #IMPLIED
numOctaves %Integer.datatype; #IMPLIED
seed %Number.datatype; #IMPLIED
stitchTiles ( stitch | noStitch ) 'noStitch'
type ( fractalNoise | turbulence ) 'turbulence'
>
<!-- end of SVG.feTurbulence.attlist -->]]>
<!-- feDistantLight: Filter Effect Distant Light Element -->
<!ENTITY % SVG.feDistantLight.extra.content "" >
<!ENTITY % SVG.feDistantLight.element "INCLUDE" >
<![%SVG.feDistantLight.element;[
<!ENTITY % SVG.feDistantLight.content
"( %SVG.animate.qname; | %SVG.set.qname;
%SVG.feDistantLight.extra.content; )*"
>
<!ELEMENT %SVG.feDistantLight.qname; %SVG.feDistantLight.content; >
<!-- end of SVG.feDistantLight.element -->]]>
<!ENTITY % SVG.feDistantLight.attlist "INCLUDE" >
<![%SVG.feDistantLight.attlist;[
<!ATTLIST %SVG.feDistantLight.qname;
%SVG.Core.attrib;
azimuth %Number.datatype; #IMPLIED
elevation %Number.datatype; #IMPLIED
>
<!-- end of SVG.feDistantLight.attlist -->]]>
<!-- fePointLight: Filter Effect Point Light Element ... -->
<!ENTITY % SVG.fePointLight.extra.content "" >
<!ENTITY % SVG.fePointLight.element "INCLUDE" >
<![%SVG.fePointLight.element;[
<!ENTITY % SVG.fePointLight.content
"( %SVG.animate.qname; | %SVG.set.qname;
%SVG.fePointLight.extra.content; )*"
>
<!ELEMENT %SVG.fePointLight.qname; %SVG.fePointLight.content; >
<!-- end of SVG.fePointLight.element -->]]>
<!ENTITY % SVG.fePointLight.attlist "INCLUDE" >
<![%SVG.fePointLight.attlist;[
<!ATTLIST %SVG.fePointLight.qname;
%SVG.Core.attrib;
x %Number.datatype; #IMPLIED
y %Number.datatype; #IMPLIED
z %Number.datatype; #IMPLIED
>
<!-- end of SVG.fePointLight.attlist -->]]>
<!-- feSpotLight: Filter Effect Spot Light Element ..... -->
<!ENTITY % SVG.feSpotLight.extra.content "" >
<!ENTITY % SVG.feSpotLight.element "INCLUDE" >
<![%SVG.feSpotLight.element;[
<!ENTITY % SVG.feSpotLight.content
"( %SVG.animate.qname; | %SVG.set.qname; %SVG.feSpotLight.extra.content; )*"
>
<!ELEMENT %SVG.feSpotLight.qname; %SVG.feSpotLight.content; >
<!-- end of SVG.feSpotLight.element -->]]>
<!ENTITY % SVG.feSpotLight.attlist "INCLUDE" >
<![%SVG.feSpotLight.attlist;[
<!ATTLIST %SVG.feSpotLight.qname;
%SVG.Core.attrib;
x %Number.datatype; #IMPLIED
y %Number.datatype; #IMPLIED
z %Number.datatype; #IMPLIED
pointsAtX %Number.datatype; #IMPLIED
pointsAtY %Number.datatype; #IMPLIED
pointsAtZ %Number.datatype; #IMPLIED
specularExponent %Number.datatype; #IMPLIED
limitingConeAngle %Number.datatype; #IMPLIED
>
<!-- end of SVG.feSpotLight.attlist -->]]>
<!-- feFuncR: Filter Effect Function Red Element ....... -->
<!ENTITY % SVG.feFuncR.extra.content "" >
<!ENTITY % SVG.feFuncR.element "INCLUDE" >
<![%SVG.feFuncR.element;[
<!ENTITY % SVG.feFuncR.content
"( %SVG.animate.qname; | %SVG.set.qname; %SVG.feFuncR.extra.content; )*"
>
<!ELEMENT %SVG.feFuncR.qname; %SVG.feFuncR.content; >
<!-- end of SVG.feFuncR.element -->]]>
<!ENTITY % SVG.feFuncR.attlist "INCLUDE" >
<![%SVG.feFuncR.attlist;[
<!ATTLIST %SVG.feFuncR.qname;
%SVG.Core.attrib;
type ( identity | table | discrete | linear | gamma ) #REQUIRED
tableValues CDATA #IMPLIED
slope %Number.datatype; #IMPLIED
intercept %Number.datatype; #IMPLIED
amplitude %Number.datatype; #IMPLIED
exponent %Number.datatype; #IMPLIED
offset %Number.datatype; #IMPLIED
>
<!-- end of SVG.feFuncR.attlist -->]]>
<!-- feFuncG: Filter Effect Function Green Element ..... -->
<!ENTITY % SVG.feFuncG.extra.content "" >
<!ENTITY % SVG.feFuncG.element "INCLUDE" >
<![%SVG.feFuncG.element;[
<!ENTITY % SVG.feFuncG.content
"( %SVG.animate.qname; | %SVG.set.qname; %SVG.feFuncG.extra.content; )*"
>
<!ELEMENT %SVG.feFuncG.qname; %SVG.feFuncG.content; >
<!-- end of SVG.feFuncG.element -->]]>
<!ENTITY % SVG.feFuncG.attlist "INCLUDE" >
<![%SVG.feFuncG.attlist;[
<!ATTLIST %SVG.feFuncG.qname;
%SVG.Core.attrib;
type ( identity | table | discrete | linear | gamma ) #REQUIRED
tableValues CDATA #IMPLIED
slope %Number.datatype; #IMPLIED
intercept %Number.datatype; #IMPLIED
amplitude %Number.datatype; #IMPLIED
exponent %Number.datatype; #IMPLIED
offset %Number.datatype; #IMPLIED
>
<!-- end of SVG.feFuncG.attlist -->]]>
<!-- feFuncB: Filter Effect Function Blue Element ...... -->
<!ENTITY % SVG.feFuncB.extra.content "" >
<!ENTITY % SVG.feFuncB.element "INCLUDE" >
<![%SVG.feFuncB.element;[
<!ENTITY % SVG.feFuncB.content
"( %SVG.animate.qname; | %SVG.set.qname; %SVG.feFuncB.extra.content; )*"
>
<!ELEMENT %SVG.feFuncB.qname; %SVG.feFuncB.content; >
<!-- end of SVG.feFuncB.element -->]]>
<!ENTITY % SVG.feFuncB.attlist "INCLUDE" >
<![%SVG.feFuncB.attlist;[
<!ATTLIST %SVG.feFuncB.qname;
%SVG.Core.attrib;
type ( identity | table | discrete | linear | gamma ) #REQUIRED
tableValues CDATA #IMPLIED
slope %Number.datatype; #IMPLIED
intercept %Number.datatype; #IMPLIED
amplitude %Number.datatype; #IMPLIED
exponent %Number.datatype; #IMPLIED
offset %Number.datatype; #IMPLIED
>
<!-- end of SVG.feFuncB.attlist -->]]>
<!-- feFuncA: Filter Effect Function Alpha Element ..... -->
<!ENTITY % SVG.feFuncA.extra.content "" >
<!ENTITY % SVG.feFuncA.element "INCLUDE" >
<![%SVG.feFuncA.element;[
<!ENTITY % SVG.feFuncA.content
"( %SVG.animate.qname; | %SVG.set.qname; %SVG.feFuncA.extra.content; )*"
>
<!ELEMENT %SVG.feFuncA.qname; %SVG.feFuncA.content; >
<!-- end of SVG.feFuncA.element -->]]>
<!ENTITY % SVG.feFuncA.attlist "INCLUDE" >
<![%SVG.feFuncA.attlist;[
<!ATTLIST %SVG.feFuncA.qname;
%SVG.Core.attrib;
type ( identity | table | discrete | linear | gamma ) #REQUIRED
tableValues CDATA #IMPLIED
slope %Number.datatype; #IMPLIED
intercept %Number.datatype; #IMPLIED
amplitude %Number.datatype; #IMPLIED
exponent %Number.datatype; #IMPLIED
offset %Number.datatype; #IMPLIED
>
<!-- end of SVG.feFuncA.attlist -->]]>
<!-- end of svg-filter.mod -->
Basic Filter Module defines the Filter.class and FilterPrimitive.class element collections and the Filter.attrib, FilterColor.attrib, FilterPrimitive.attrib and FilterPrimitiveWithIn.attrib attribute collections.
| Collection name | Elements in collection |
|---|---|
| Filter.class | filter |
| FilterPrimitive.class | feBlend, feFlood, feColorMatrix, feComponentTransfer, feComposite, feGaussianBlur, feImage, feMerge, feOffset, feTile |
| Collection name | Attributes in collection |
|---|---|
| Filter.attrib | filter |
| FilterColor.attrib | color-interpolation-filters |
| FilterPrimitive.attrib | x, y, width, height, result |
| FilterPrimitiveWithIn.attrib | FilterPrimitive.attrib, in |
<!-- ....................................................................... -->
<!-- SVG 1.1 Basic Filter Module ........................................... -->
<!-- file: svg-basic-filter.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Basic Filter//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-basic-filter.mod"
....................................................................... -->
<!-- Basic Filter
filter, feBlend, feColorMatrix, feComponentTransfer, feComposite,
feFlood, feGaussianBlur, feImage, feMerge, feMergeNode, feOffset,
feTile, feFuncR, feFuncG, feFuncB, feFuncA
This module declares markup to provide support for filter effect.
-->
<!-- 'filter' property/attribute value (тобто, 'none', <uri>) -->
<!ENTITY % FilterValue.datatype "CDATA" >
<!-- list of <number>s, but at least one and at most two -->
<!ENTITY % NumberOptionalNumber.datatype "CDATA" >
<!-- Qualified Names (Default) ......................... -->
<!ENTITY % SVG.filter.qname "filter" >
<!ENTITY % SVG.feBlend.qname "feBlend" >
<!ENTITY % SVG.feColorMatrix.qname "feColorMatrix" >
<!ENTITY % SVG.feComponentTransfer.qname "feComponentTransfer" >
<!ENTITY % SVG.feComposite.qname "feComposite" >
<!ENTITY % SVG.feFlood.qname "feFlood" >
<!ENTITY % SVG.feGaussianBlur.qname "feGaussianBlur" >
<!ENTITY % SVG.feImage.qname "feImage" >
<!ENTITY % SVG.feMerge.qname "feMerge" >
<!ENTITY % SVG.feMergeNode.qname "feMergeNode" >
<!ENTITY % SVG.feOffset.qname "feOffset" >
<!ENTITY % SVG.feTile.qname "feTile" >
<!ENTITY % SVG.feFuncR.qname "feFuncR" >
<!ENTITY % SVG.feFuncG.qname "feFuncG" >
<!ENTITY % SVG.feFuncB.qname "feFuncB" >
<!ENTITY % SVG.feFuncA.qname "feFuncA" >
<!-- Attribute Collections (Default) ................... -->
<!ENTITY % SVG.Core.attrib "" >
<!ENTITY % SVG.Container.attrib "" >
<!ENTITY % SVG.Style.attrib "" >
<!ENTITY % SVG.Viewport.attrib "" >
<!ENTITY % SVG.Text.attrib "" >
<!ENTITY % SVG.TextContent.attrib "" >
<!ENTITY % SVG.Font.attrib "" >
<!ENTITY % SVG.Paint.attrib "" >
<!ENTITY % SVG.Color.attrib "" >
<!ENTITY % SVG.Opacity.attrib "" >
<!ENTITY % SVG.Graphics.attrib "" >
<!ENTITY % SVG.Marker.attrib "" >
<!ENTITY % SVG.ColorProfile.attrib "" >
<!ENTITY % SVG.Gradient.attrib "" >
<!ENTITY % SVG.Clip.attrib "" >
<!ENTITY % SVG.Mask.attrib "" >
<!ENTITY % SVG.Cursor.attrib "" >
<!ENTITY % SVG.XLink.attrib "" >
<!ENTITY % SVG.XLinkEmbed.attrib "" >
<!ENTITY % SVG.External.attrib "" >
<!-- SVG.Filter.class .................................. -->
<!ENTITY % SVG.Filter.extra.class "" >
<!ENTITY % SVG.Filter.class
"| %SVG.filter.qname; %SVG.Filter.extra.class;"
>
<!-- SVG.FilterPrimitive.class ......................... -->
<!ENTITY % SVG.FilterPrimitive.extra.class "" >
<!ENTITY % SVG.FilterPrimitive.class
"| %SVG.feBlend.qname; | %SVG.feColorMatrix.qname;
| %SVG.feComponentTransfer.qname; | %SVG.feComposite.qname;
| %SVG.feFlood.qname; | %SVG.feGaussianBlur.qname; | %SVG.feImage.qname;
| %SVG.feMerge.qname; | %SVG.feOffset.qname; | %SVG.feTile.qname;
%SVG.FilterPrimitive.extra.class;"
>
<!-- SVG.Filter.attrib ................................. -->
<!ENTITY % SVG.Filter.extra.attrib "" >
<!ENTITY % SVG.Filter.attrib
"filter %FilterValue.datatype; #IMPLIED
%SVG.Filter.extra.attrib;"
>
<!-- SVG.FilterColor.attrib ............................ -->
<!ENTITY % SVG.FilterColor.extra.attrib "" >
<!ENTITY % SVG.FilterColor.attrib
"color-interpolation-filters ( auto | sRGB | linearRGB | inherit )
#IMPLIED
%SVG.FilterColor.extra.attrib;"
>
<!-- SVG.FilterPrimitive.attrib ........................ -->
<!ENTITY % SVG.FilterPrimitive.extra.attrib "" >
<!ENTITY % SVG.FilterPrimitive.attrib
"x %Coordinate.datatype; #IMPLIED
y %Coordinate.datatype; #IMPLIED
width %Length.datatype; #IMPLIED
height %Length.datatype; #IMPLIED
result CDATA #IMPLIED
%SVG.FilterPrimitive.extra.attrib;"
>
<!-- SVG.FilterPrimitiveWithIn.attrib .................. -->
<!ENTITY % SVG.FilterPrimitiveWithIn.extra.attrib "" >
<!ENTITY % SVG.FilterPrimitiveWithIn.attrib
"%SVG.FilterPrimitive.attrib;
in CDATA #IMPLIED
%SVG.FilterPrimitiveWithIn.extra.attrib;"
>
<!-- SVG.Presentation.attrib ........................... -->
<!ENTITY % SVG.Presentation.extra.attrib "" >
<!ENTITY % SVG.Presentation.attrib
"%SVG.Container.attrib;
%SVG.Viewport.attrib;
%SVG.Text.attrib;
%SVG.TextContent.attrib;
%SVG.Font.attrib;
%SVG.Paint.attrib;
%SVG.Color.attrib;
%SVG.Opacity.attrib;
%SVG.Graphics.attrib;
%SVG.Marker.attrib;
%SVG.ColorProfile.attrib;
%SVG.Gradient.attrib;
%SVG.Clip.attrib;
%SVG.Mask.attrib;
%SVG.Filter.attrib;
%SVG.FilterColor.attrib;
%SVG.Cursor.attrib;
flood-color %SVGColor.datatype; #IMPLIED
flood-opacity %OpacityValue.datatype; #IMPLIED
lighting-color %SVGColor.datatype; #IMPLIED
%SVG.Presentation.extra.attrib;"
>
<!-- filter: Filter Element ............................ -->
<!ENTITY % SVG.filter.extra.content "" >
<!ENTITY % SVG.filter.element "INCLUDE" >
<![%SVG.filter.element;[
<!ENTITY % SVG.filter.content
"( %SVG.Description.class; | %SVG.animate.qname; | %SVG.set.qname;
%SVG.FilterPrimitive.class; %SVG.filter.extra.content; )*"
>
<!ELEMENT %SVG.filter.qname; %SVG.filter.content; >
<!-- end of SVG.filter.element -->]]>
<!ENTITY % SVG.filter.attlist "INCLUDE" >
<![%SVG.filter.attlist;[
<!ATTLIST %SVG.filter.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.XLink.attrib;
%SVG.External.attrib;
x %Coordinate.datatype; #IMPLIED
y %Coordinate.datatype; #IMPLIED
width %Length.datatype; #IMPLIED
height %Length.datatype; #IMPLIED
filterRes %NumberOptionalNumber.datatype; #IMPLIED
filterUnits ( userSpaceOnUse | objectBoundingBox ) #IMPLIED
primitiveUnits ( userSpaceOnUse | objectBoundingBox ) #IMPLIED
>
<!-- end of SVG.filter.attlist -->]]>
<!-- feBlend: Filter Effect Blend Element .............. -->
<!ENTITY % SVG.feBlend.extra.content "" >
<!ENTITY % SVG.feBlend.element "INCLUDE" >
<![%SVG.feBlend.element;[
<!ENTITY % SVG.feBlend.content
"( %SVG.animate.qname; | %SVG.set.qname; %SVG.feBlend.extra.content; )*"
>
<!ELEMENT %SVG.feBlend.qname; %SVG.feBlend.content; >
<!-- end of SVG.feBlend.element -->]]>
<!ENTITY % SVG.feBlend.attlist "INCLUDE" >
<![%SVG.feBlend.attlist;[
<!ATTLIST %SVG.feBlend.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.FilterPrimitiveWithIn.attrib;
in2 CDATA #REQUIRED
mode ( normal | multiply | screen | darken | lighten ) 'normal'
>
<!-- end of SVG.feBlend.attlist -->]]>
<!-- feColorMatrix: Filter Effect Color Matrix Element . -->
<!ENTITY % SVG.feColorMatrix.extra.content "" >
<!ENTITY % SVG.feColorMatrix.element "INCLUDE" >
<![%SVG.feColorMatrix.element;[
<!ENTITY % SVG.feColorMatrix.content
"( %SVG.animate.qname; | %SVG.set.qname;
%SVG.feColorMatrix.extra.content; )*"
>
<!ELEMENT %SVG.feColorMatrix.qname; %SVG.feColorMatrix.content; >
<!-- end of SVG.feColorMatrix.element -->]]>
<!ENTITY % SVG.feColorMatrix.attlist "INCLUDE" >
<![%SVG.feColorMatrix.attlist;[
<!ATTLIST %SVG.feColorMatrix.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.FilterPrimitiveWithIn.attrib;
type ( matrix | saturate | hueRotate | luminanceToAlpha ) 'matrix'
values CDATA #IMPLIED
>
<!-- end of SVG.feColorMatrix.attlist -->]]>
<!-- feComponentTransfer: Filter Effect Component Transfer Element -->
<!ENTITY % SVG.feComponentTransfer.extra.content "" >
<!ENTITY % SVG.feComponentTransfer.element "INCLUDE" >
<![%SVG.feComponentTransfer.element;[
<!ENTITY % SVG.feComponentTransfer.content
"( %SVG.feFuncR.qname;?, %SVG.feFuncG.qname;?, %SVG.feFuncB.qname;?,
%SVG.feFuncA.qname;? %SVG.feComponentTransfer.extra.content; )"
>
<!ELEMENT %SVG.feComponentTransfer.qname; %SVG.feComponentTransfer.content; >
<!-- end of SVG.feComponentTransfer.element -->]]>
<!ENTITY % SVG.feComponentTransfer.attlist "INCLUDE" >
<![%SVG.feComponentTransfer.attlist;[
<!ATTLIST %SVG.feComponentTransfer.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.FilterPrimitiveWithIn.attrib;
>
<!-- end of SVG.feComponentTransfer.attlist -->]]>
<!-- feComposite: Filter Effect Composite Element ...... -->
<!ENTITY % SVG.feComposite.extra.content "" >
<!ENTITY % SVG.feComposite.element "INCLUDE" >
<![%SVG.feComposite.element;[
<!ENTITY % SVG.feComposite.content
"( %SVG.animate.qname; | %SVG.set.qname; %SVG.feComposite.extra.content; )*"
>
<!ELEMENT %SVG.feComposite.qname; %SVG.feComposite.content; >
<!-- end of SVG.feComposite.element -->]]>
<!ENTITY % SVG.feComposite.attlist "INCLUDE" >
<![%SVG.feComposite.attlist;[
<!ATTLIST %SVG.feComposite.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.FilterPrimitiveWithIn.attrib;
in2 CDATA #REQUIRED
operator ( over | in | out | atop | xor | arithmetic ) 'over'
k1 %Number.datatype; #IMPLIED
k2 %Number.datatype; #IMPLIED
k3 %Number.datatype; #IMPLIED
k4 %Number.datatype; #IMPLIED
>
<!-- end of SVG.feComposite.attlist -->]]>
<!-- feFlood: Filter Effect Flood Element .............. -->
<!ENTITY % SVG.feFlood.extra.content "" >
<!ENTITY % SVG.feFlood.element "INCLUDE" >
<![%SVG.feFlood.element;[
<!ENTITY % SVG.feFlood.content
"( %SVG.animate.qname; | %SVG.set.qname; | %SVG.animateColor.qname;
%SVG.feFlood.extra.content; )*"
>
<!ELEMENT %SVG.feFlood.qname; %SVG.feFlood.content; >
<!-- end of SVG.feFlood.element -->]]>
<!ENTITY % SVG.feFlood.attlist "INCLUDE" >
<![%SVG.feFlood.attlist;[
<!ATTLIST %SVG.feFlood.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
%SVG.Color.attrib;
%SVG.FilterColor.attrib;
%SVG.FilterPrimitive.attrib;
flood-color %SVGColor.datatype; #IMPLIED
flood-opacity %OpacityValue.datatype; #IMPLIED
>
<!-- end of SVG.feFlood.attlist -->]]>
<!-- feGaussianBlur: Filter Effect Gaussian Blur Element -->
<!ENTITY % SVG.feGaussianBlur.extra.content "" >
<!ENTITY % SVG.feGaussianBlur.element "INCLUDE" >
<![%SVG.feGaussianBlur.element;[
<!ENTITY % SVG.feGaussianBlur.content
"( %SVG.animate.qname; | %SVG.set.qname;
%SVG.feGaussianBlur.extra.content; )*"
>
<!ELEMENT %SVG.feGaussianBlur.qname; %SVG.feGaussianBlur.content; >
<!-- end of SVG.feGaussianBlur.element -->]]>
<!ENTITY % SVG.feGaussianBlur.attlist "INCLUDE" >
<![%SVG.feGaussianBlur.attlist;[
<!ATTLIST %SVG.feGaussianBlur.qname;
%SVG.Core.attrib;
%SVG.FilterColor.attrib;
%SVG.FilterPrimitiveWithIn.attrib;
stdDeviation %NumberOptionalNumber.datatype; #IMPLIED
>
<!-- end of SVG.feGaussianBlur.attlist -->]]>
<!-- feImage: Filter Effect Image Element .............. -->
<!ENTITY % SVG.feImage.extra.content "" >
<!ENTITY % SVG.feImage.element "INCLUDE" >
<![%SVG.feImage.element;[
<!ENTITY % SVG.feImage.content
"( %SVG.animate.qname; | %SVG.set.qname; | %SVG.animateTransform.qname;
%SVG.feImage.extra.content; )*"
>
<!ELEMENT %SVG.feImage.qname; %SVG.feImage.content; >
<!-- end of SVG.feImage.element -->]]>
<!ENTITY % SVG.feImage.attlist "INCLUDE" >
<![%SVG.feImage.attlist;[
<!ATTLIST %SVG.feImage.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.FilterPrimitive.attrib;
%SVG.XLinkEmbed.attrib;
%SVG.External.attrib;
preserveAspectRatio %PreserveAspectRatioSpec.datatype; 'xMidYMid meet'
>
<!-- end of SVG.feImage.attlist -->]]>
<!-- feMerge: Filter Effect Merge Element .............. -->
<!ENTITY % SVG.feMerge.extra.content "" >
<!ENTITY % SVG.feMerge.element "INCLUDE" >
<![%SVG.feMerge.element;[
<!ENTITY % SVG.feMerge.content
"( %SVG.feMergeNode.qname; %SVG.feMerge.extra.content; )*"
>
<!ELEMENT %SVG.feMerge.qname; %SVG.feMerge.content; >
<!-- end of SVG.feMerge.element -->]]>
<!ENTITY % SVG.feMerge.attlist "INCLUDE" >
<![%SVG.feMerge.attlist;[
<!ATTLIST %SVG.feMerge.qname;
%SVG.Core.attrib;
%SVG.FilterColor.attrib;
%SVG.FilterPrimitive.attrib;
>
<!-- end of SVG.feMerge.attlist -->]]>
<!-- feMergeNode: Filter Effect Merge Node Element ..... -->
<!ENTITY % SVG.feMergeNode.extra.content "" >
<!ENTITY % SVG.feMergeNode.element "INCLUDE" >
<![%SVG.feMergeNode.element;[
<!ENTITY % SVG.feMergeNode.content
"( %SVG.animate.qname; | %SVG.set.qname; %SVG.feMergeNode.extra.content; )*"
>
<!ELEMENT %SVG.feMergeNode.qname; %SVG.feMergeNode.content; >
<!-- end of SVG.feMergeNode.element -->]]>
<!ENTITY % SVG.feMergeNode.attlist "INCLUDE" >
<![%SVG.feMergeNode.attlist;[
<!ATTLIST %SVG.feMergeNode.qname;
%SVG.Core.attrib;
in CDATA #IMPLIED
>
<!-- end of SVG.feMergeNode.attlist -->]]>
<!-- feOffset: Filter Effect Offset Element ............ -->
<!ENTITY % SVG.feOffset.extra.content "" >
<!ENTITY % SVG.feOffset.element "INCLUDE" >
<![%SVG.feOffset.element;[
<!ENTITY % SVG.feOffset.content
"( %SVG.animate.qname; | %SVG.set.qname; %SVG.feOffset.extra.content; )*"
>
<!ELEMENT %SVG.feOffset.qname; %SVG.feOffset.content; >
<!-- end of SVG.feOffset.element -->]]>
<!ENTITY % SVG.feOffset.attlist "INCLUDE" >
<![%SVG.feOffset.attlist;[
<!ATTLIST %SVG.feOffset.qname;
%SVG.Core.attrib;
%SVG.FilterColor.attrib;
%SVG.FilterPrimitiveWithIn.attrib;
dx %Number.datatype; #IMPLIED
dy %Number.datatype; #IMPLIED
>
<!-- end of SVG.feOffset.attlist -->]]>
<!-- feTile: Filter Effect Tile Element ................ -->
<!ENTITY % SVG.feTile.extra.content "" >
<!ENTITY % SVG.feTile.element "INCLUDE" >
<![%SVG.feTile.element;[
<!ENTITY % SVG.feTile.content
"( %SVG.animate.qname; | %SVG.set.qname; %SVG.feTile.extra.content; )*"
>
<!ELEMENT %SVG.feTile.qname; %SVG.feTile.content; >
<!-- end of SVG.feTile.element -->]]>
<!ENTITY % SVG.feTile.attlist "INCLUDE" >
<![%SVG.feTile.attlist;[
<!ATTLIST %SVG.feTile.qname;
%SVG.Core.attrib;
%SVG.FilterColor.attrib;
%SVG.FilterPrimitiveWithIn.attrib;
>
<!-- end of SVG.feTile.attlist -->]]>
<!-- feFuncR: Filter Effect Function Red Element ....... -->
<!ENTITY % SVG.feFuncR.extra.content "" >
<!ENTITY % SVG.feFuncR.element "INCLUDE" >
<![%SVG.feFuncR.element;[
<!ENTITY % SVG.feFuncR.content
"( %SVG.animate.qname; | %SVG.set.qname; %SVG.feFuncR.extra.content; )*"
>
<!ELEMENT %SVG.feFuncR.qname; %SVG.feFuncR.content; >
<!-- end of SVG.feFuncR.element -->]]>
<!ENTITY % SVG.feFuncR.attlist "INCLUDE" >
<![%SVG.feFuncR.attlist;[
<!ATTLIST %SVG.feFuncR.qname;
%SVG.Core.attrib;
type ( identity | table | discrete | linear | gamma ) #REQUIRED
tableValues CDATA #IMPLIED
slope %Number.datatype; #IMPLIED
intercept %Number.datatype; #IMPLIED
amplitude %Number.datatype; #IMPLIED
exponent %Number.datatype; #IMPLIED
offset %Number.datatype; #IMPLIED
>
<!-- end of SVG.feFuncR.attlist -->]]>
<!-- feFuncG: Filter Effect Function Green Element ..... -->
<!ENTITY % SVG.feFuncG.extra.content "" >
<!ENTITY % SVG.feFuncG.element "INCLUDE" >
<![%SVG.feFuncG.element;[
<!ENTITY % SVG.feFuncG.content
"( %SVG.animate.qname; | %SVG.set.qname; %SVG.feFuncG.extra.content; )*"
>
<!ELEMENT %SVG.feFuncG.qname; %SVG.feFuncG.content; >
<!-- end of SVG.feFuncG.element -->]]>
<!ENTITY % SVG.feFuncG.attlist "INCLUDE" >
<![%SVG.feFuncG.attlist;[
<!ATTLIST %SVG.feFuncG.qname;
%SVG.Core.attrib;
type ( identity | table | discrete | linear | gamma ) #REQUIRED
tableValues CDATA #IMPLIED
slope %Number.datatype; #IMPLIED
intercept %Number.datatype; #IMPLIED
amplitude %Number.datatype; #IMPLIED
exponent %Number.datatype; #IMPLIED
offset %Number.datatype; #IMPLIED
>
<!-- end of SVG.feFuncG.attlist -->]]>
<!-- feFuncB: Filter Effect Function Blue Element ...... -->
<!ENTITY % SVG.feFuncB.extra.content "" >
<!ENTITY % SVG.feFuncB.element "INCLUDE" >
<![%SVG.feFuncB.element;[
<!ENTITY % SVG.feFuncB.content
"( %SVG.animate.qname; | %SVG.set.qname; %SVG.feFuncB.extra.content; )*"
>
<!ELEMENT %SVG.feFuncB.qname; %SVG.feFuncB.content; >
<!-- end of SVG.feFuncB.element -->]]>
<!ENTITY % SVG.feFuncB.attlist "INCLUDE" >
<![%SVG.feFuncB.attlist;[
<!ATTLIST %SVG.feFuncB.qname;
%SVG.Core.attrib;
type ( identity | table | discrete | linear | gamma ) #REQUIRED
tableValues CDATA #IMPLIED
slope %Number.datatype; #IMPLIED
intercept %Number.datatype; #IMPLIED
amplitude %Number.datatype; #IMPLIED
exponent %Number.datatype; #IMPLIED
offset %Number.datatype; #IMPLIED
>
<!-- end of SVG.feFuncB.attlist -->]]>
<!-- feFuncA: Filter Effect Function Alpha Element ..... -->
<!ENTITY % SVG.feFuncA.extra.content "" >
<!ENTITY % SVG.feFuncA.element "INCLUDE" >
<![%SVG.feFuncA.element;[
<!ENTITY % SVG.feFuncA.content
"( %SVG.animate.qname; | %SVG.set.qname; %SVG.feFuncA.extra.content; )*"
>
<!ELEMENT %SVG.feFuncA.qname; %SVG.feFuncA.content; >
<!-- end of SVG.feFuncA.element -->]]>
<!ENTITY % SVG.feFuncA.attlist "INCLUDE" >
<![%SVG.feFuncA.attlist;[
<!ATTLIST %SVG.feFuncA.qname;
%SVG.Core.attrib;
type ( identity | table | discrete | linear | gamma ) #REQUIRED
tableValues CDATA #IMPLIED
slope %Number.datatype; #IMPLIED
intercept %Number.datatype; #IMPLIED
amplitude %Number.datatype; #IMPLIED
exponent %Number.datatype; #IMPLIED
offset %Number.datatype; #IMPLIED
>
<!-- end of SVG.feFuncA.attlist -->]]>
<!-- end of svg-basic-filter.mod -->
Cursor Module defines the Cursor.class element collection and the Cursor.attrib attribute collection.
| Collection name | Elements in collection |
|---|---|
| Cursor.class | cursor |
| Collection name | Elements in collection |
|---|---|
| Cursor.attrib | cursor |
<!-- ....................................................................... -->
<!-- SVG 1.1 Cursor Module ................................................. -->
<!-- file: svg-cursor.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Cursor//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-cursor.mod"
....................................................................... -->
<!-- Cursor
cursor
This module declares markup to provide support for cursor.
-->
<!-- 'cursor' property/attribute value (тобто, 'crosshair', <uri>) -->
<!ENTITY % CursorValue.datatype "CDATA" >
<!-- Qualified Names (Default) ......................... -->
<!ENTITY % SVG.cursor.qname "cursor" >
<!-- Attribute Collections (Default) ................... -->
<!ENTITY % SVG.Core.attrib "" >
<!ENTITY % SVG.Conditional.attrib "" >
<!ENTITY % SVG.XLinkRequired.attrib "" >
<!ENTITY % SVG.External.attrib "" >
<!-- SVG.Cursor.class .................................. -->
<!ENTITY % SVG.Cursor.extra.class "" >
<!ENTITY % SVG.Cursor.class
"| %SVG.cursor.qname; %SVG.Cursor.extra.class;"
>
<!-- SVG.Cursor.attrib ................................. -->
<!ENTITY % SVG.Cursor.extra.attrib "" >
<!ENTITY % SVG.Cursor.attrib
"cursor %CursorValue.datatype; #IMPLIED
%SVG.Cursor.extra.attrib;"
>
<!-- cursor: Cursor Element ............................ -->
<!ENTITY % SVG.cursor.extra.content "" >
<!ENTITY % SVG.cursor.element "INCLUDE" >
<![%SVG.cursor.element;[
<!ENTITY % SVG.cursor.content
"( %SVG.Description.class; %SVG.cursor.extra.content; )*"
>
<!ELEMENT %SVG.cursor.qname; %SVG.cursor.content; >
<!-- end of SVG.cursor.element -->]]>
<!ENTITY % SVG.cursor.attlist "INCLUDE" >
<![%SVG.cursor.attlist;[
<!ATTLIST %SVG.cursor.qname;
%SVG.Core.attrib;
%SVG.Conditional.attrib;
%SVG.XLinkRequired.attrib;
%SVG.External.attrib;
x %Coordinate.datatype; #IMPLIED
y %Coordinate.datatype; #IMPLIED
>
<!-- end of SVG.cursor.attlist -->]]>
<!-- end of svg-cursor.mod -->
Hyperlinking Module defines the Hyperlink.class element collection.
| Collection name | Elements in collection |
|---|---|
| Hyperlink.class | a |
<!-- ....................................................................... -->
<!-- SVG 1.1 Hyperlinking Module ........................................... -->
<!-- file: svg-hyperlink.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Hyperlinking//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-hyperlink.mod"
....................................................................... -->
<!-- Hyperlinking
a
This module declares markup to provide support for hyper linking.
-->
<!-- link to this target -->
<!ENTITY % LinkTarget.datatype "NMTOKEN" >
<!-- Qualified Names (Default) ......................... -->
<!ENTITY % SVG.a.qname "a" >
<!-- Attribute Collections (Default) ................... -->
<!ENTITY % SVG.Core.attrib "" >
<!ENTITY % SVG.Conditional.attrib "" >
<!ENTITY % SVG.Style.attrib "" >
<!ENTITY % SVG.Viewport.attrib "" >
<!ENTITY % SVG.Text.attrib "" >
<!ENTITY % SVG.TextContent.attrib "" >
<!ENTITY % SVG.Font.attrib "" >
<!ENTITY % SVG.Paint.attrib "" >
<!ENTITY % SVG.Color.attrib "" >
<!ENTITY % SVG.Opacity.attrib "" >
<!ENTITY % SVG.Graphics.attrib "" >
<!ENTITY % SVG.Marker.attrib "" >
<!ENTITY % SVG.Gradient.attrib "" >
<!ENTITY % SVG.Clip.attrib "" >
<!ENTITY % SVG.Mask.attrib "" >
<!ENTITY % SVG.Filter.attrib "" >
<!ENTITY % SVG.FilterColor.attrib "" >
<!ENTITY % SVG.GraphicalEvents.attrib "" >
<!ENTITY % SVG.Cursor.attrib "" >
<!ENTITY % SVG.XLinkReplace.attrib "" >
<!ENTITY % SVG.External.attrib "" >
<!-- SVG.Hyperlink.class ............................... -->
<!ENTITY % SVG.Hyperlink.extra.class "" >
<!ENTITY % SVG.Hyperlink.class
"| %SVG.a.qname; %SVG.Hyperlink.extra.class;"
>
<!-- SVG.Presentation.attrib ........................... -->
<!ENTITY % SVG.Presentation.extra.attrib "" >
<!ENTITY % SVG.Presentation.attrib
"%SVG.Container.attrib;
%SVG.Viewport.attrib;
%SVG.Text.attrib;
%SVG.TextContent.attrib;
%SVG.Font.attrib;
%SVG.Paint.attrib;
%SVG.Color.attrib;
%SVG.Opacity.attrib;
%SVG.Graphics.attrib;
%SVG.Marker.attrib;
%SVG.ColorProfile.attrib;
%SVG.Gradient.attrib;
%SVG.Clip.attrib;
%SVG.Mask.attrib;
%SVG.Filter.attrib;
%SVG.FilterColor.attrib;
%SVG.Cursor.attrib;
flood-color %SVGColor.datatype; #IMPLIED
flood-opacity %OpacityValue.datatype; #IMPLIED
lighting-color %SVGColor.datatype; #IMPLIED
%SVG.Presentation.extra.attrib;"
>
<!-- a: Anchor Element ................................. -->
<!ENTITY % SVG.a.extra.content "" >
<!ENTITY % SVG.a.element "INCLUDE" >
<![%SVG.a.element;[
<!ENTITY % SVG.a.content
"( #PCDATA | %SVG.Description.class; | %SVG.Animation.class;
%SVG.Structure.class; %SVG.Conditional.class; %SVG.Image.class;
%SVG.Style.class; %SVG.Shape.class; %SVG.Text.class; %SVG.Marker.class;
%SVG.ColorProfile.class; %SVG.Gradient.class; %SVG.Pattern.class;
%SVG.Clip.class; %SVG.Mask.class; %SVG.Filter.class; %SVG.Cursor.class;
%SVG.Hyperlink.class; %SVG.View.class; %SVG.Script.class;
%SVG.Font.class; %SVG.Extensibility.class; %SVG.a.extra.content; )*"
>
<!ELEMENT %SVG.a.qname; %SVG.a.content; >
<!-- end of SVG.a.element -->]]>
<!ENTITY % SVG.a.attlist "INCLUDE" >
<![%SVG.a.attlist;[
<!ATTLIST %SVG.a.qname;
%SVG.Core.attrib;
%SVG.Conditional.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.GraphicalEvents.attrib;
%SVG.XLinkReplace.attrib;
%SVG.External.attrib;
transform %TransformList.datatype; #IMPLIED
target %LinkTarget.datatype; #IMPLIED
>
<!-- end of SVG.a.attlist -->]]>
<!-- end of svg-hyperlink.mod -->
View Module defines the View.class element collection.
| Collection name | Elements in collection |
|---|---|
| View.class | view |
<!-- ....................................................................... -->
<!-- SVG 1.1 View Module ................................................... -->
<!-- file: svg-view.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ELEMENTS SVG 1.1 View//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-view.mod"
....................................................................... -->
<!-- View
view
This module declares markup to provide support for view.
-->
<!-- Qualified Names (Default) ......................... -->
<!ENTITY % SVG.view.qname "view" >
<!-- Attribute Collections (Default) ................... -->
<!ENTITY % SVG.Core.attrib "" >
<!ENTITY % SVG.External.attrib "" >
<!-- SVG.View.class .................................... -->
<!ENTITY % SVG.View.extra.class "" >
<!ENTITY % SVG.View.class
"| %SVG.view.qname; %SVG.View.extra.class;"
>
<!-- view: View Element ................................ -->
<!ENTITY % SVG.view.extra.content "" >
<!ENTITY % SVG.view.element "INCLUDE" >
<![%SVG.view.element;[
<!ENTITY % SVG.view.content
"( %SVG.Description.class; %SVG.view.extra.content; )*"
>
<!ELEMENT %SVG.view.qname; %SVG.view.content; >
<!-- end of SVG.view.element -->]]>
<!ENTITY % SVG.view.attlist "INCLUDE" >
<![%SVG.view.attlist;[
<!ATTLIST %SVG.view.qname;
%SVG.Core.attrib;
%SVG.External.attrib;
viewBox %ViewBoxSpec.datatype; #IMPLIED
preserveAspectRatio %PreserveAspectRatioSpec.datatype; 'xMidYMid meet'
zoomAndPan ( disable | magnify ) 'magnify'
viewTarget CDATA #IMPLIED
>
<!-- end of SVG.view.attlist -->]]>
<!-- end of svg-view.mod -->
Script Module defines the Script.class element collection.
| Collection name | Elements in collection |
|---|---|
| Script.class | script |
<!-- ....................................................................... -->
<!-- SVG 1.1 Scripting Module .............................................. -->
<!-- file: svg-script.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Scripting//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-script.mod"
....................................................................... -->
<!-- Scripting
script
This module declares markup to provide support for scripting.
-->
<!-- Qualified Names (Default) ......................... -->
<!ENTITY % SVG.script.qname "script" >
<!-- Attribute Collections (Default) ................... -->
<!ENTITY % SVG.Core.attrib "" >
<!ENTITY % SVG.XLink.attrib "" >
<!ENTITY % SVG.External.attrib "" >
<!-- SVG.Script.class .................................. -->
<!ENTITY % SVG.Script.extra.class "" >
<!ENTITY % SVG.Script.class
"| %SVG.script.qname; %SVG.Script.extra.class;"
>
<!-- script: Script Element ............................ -->
<!ENTITY % SVG.script.extra.content "" >
<!ENTITY % SVG.script.element "INCLUDE" >
<![%SVG.script.element;[
<!ENTITY % SVG.script.content
"( #PCDATA %SVG.script.extra.content; )*"
>
<!ELEMENT %SVG.script.qname; %SVG.script.content; >
<!-- end of SVG.script.element -->]]>
<!ENTITY % SVG.script.attlist "INCLUDE" >
<![%SVG.script.attlist;[
<!ATTLIST %SVG.script.qname;
%SVG.Core.attrib;
%SVG.XLink.attrib;
%SVG.External.attrib;
type %ContentType.datatype; #REQUIRED
>
<!-- end of SVG.script.attlist -->]]>
<!-- end of svg-script.mod -->
Animation Module defines the Animation.class element collection and the Animation.attrib, AnimationAttribute.attrib, AnimationTiming.attrib, AnimationValue.attrib and AnimationAddtion.attrib attribute collections.
| Collection name | Elements in collection |
|---|---|
| Animation.class | animate, animateColor, animateTransform, animateMotion, set |
| Collection name | Attributes in collection |
|---|---|
| Animation.attrib | XLink.attrib |
| AnimationAttribute.attrib | attributeName, attributeType |
| AnimationTiming.attrib | begin, dur, end, min, max, restart, repeatCount, repeatDur, fill |
| AnimationValue.attrib | calcMode, values, keyTimes, keySplines, from, to, by |
| AnimationAddition.attrib | additive, accumulate |
<!-- ....................................................................... -->
<!-- SVG 1.1 Animation Module .............................................. -->
<!-- file: svg-animation.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Animation//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-animation.mod"
....................................................................... -->
<!-- Animation
animate, set, animateMotion, animateColor, animateTransform, mpath
This module declares markup to provide support for animation.
-->
<!-- Qualified Names (Default) ......................... -->
<!ENTITY % SVG.animate.qname "animate" >
<!ENTITY % SVG.set.qname "set" >
<!ENTITY % SVG.animateMotion.qname "animateMotion" >
<!ENTITY % SVG.animateColor.qname "animateColor" >
<!ENTITY % SVG.animateTransform.qname "animateTransform" >
<!ENTITY % SVG.mpath.qname "mpath" >
<!-- Attribute Collections (Default) ................... -->
<!ENTITY % SVG.Core.attrib "" >
<!ENTITY % SVG.Conditional.attrib "" >
<!ENTITY % SVG.AnimationEvents.attrib "" >
<!ENTITY % SVG.XLink.attrib "" >
<!ENTITY % SVG.XLinkRequired.attrib "" >
<!ENTITY % SVG.External.attrib "" >
<!-- SVG.Animation.class ............................... -->
<!ENTITY % SVG.Animation.extra.class "" >
<!ENTITY % SVG.Animation.class
"%SVG.animate.qname; | %SVG.set.qname; | %SVG.animateMotion.qname; |
%SVG.animateColor.qname; | %SVG.animateTransform.qname;
%SVG.Animation.extra.class;"
>
<!-- SVG.Animation.attrib .............................. -->
<!ENTITY % SVG.Animation.extra.attrib "" >
<!ENTITY % SVG.Animation.attrib
"%SVG.XLink.attrib;
%SVG.Animation.extra.attrib;"
>
<!-- SVG.AnimationAttribute.attrib ..................... -->
<!ENTITY % SVG.AnimationAttribute.extra.attrib "" >
<!ENTITY % SVG.AnimationAttribute.attrib
"attributeName CDATA #REQUIRED
attributeType CDATA #IMPLIED
%SVG.AnimationAttribute.extra.attrib;"
>
<!-- SVG.AnimationTiming.attrib ........................ -->
<!ENTITY % SVG.AnimationTiming.extra.attrib "" >
<!ENTITY % SVG.AnimationTiming.attrib
"begin CDATA #IMPLIED
dur CDATA #IMPLIED
end CDATA #IMPLIED
min CDATA #IMPLIED
max CDATA #IMPLIED
restart ( always | never | whenNotActive ) 'always'
repeatCount CDATA #IMPLIED
repeatDur CDATA #IMPLIED
fill ( remove | freeze ) 'remove'
%SVG.AnimationTiming.extra.attrib;"
>
<!-- SVG.AnimationValue.attrib ......................... -->
<!ENTITY % SVG.AnimationValue.extra.attrib "" >
<!ENTITY % SVG.AnimationValue.attrib
"calcMode ( discrete | linear | paced | spline ) 'linear'
values CDATA #IMPLIED
keyTimes CDATA #IMPLIED
keySplines CDATA #IMPLIED
from CDATA #IMPLIED
to CDATA #IMPLIED
by CDATA #IMPLIED
%SVG.AnimationValue.extra.attrib;"
>
<!-- SVG.AnimationAddtion.attrib ....................... -->
<!ENTITY % SVG.AnimationAddtion.extra.attrib "" >
<!ENTITY % SVG.AnimationAddtion.attrib
"additive ( replace | sum ) 'replace'
accumulate ( none | sum ) 'none'
%SVG.AnimationAddtion.extra.attrib;"
>
<!-- animate: Animate Element .......................... -->
<!ENTITY % SVG.animate.extra.content "" >
<!ENTITY % SVG.animate.element "INCLUDE" >
<![%SVG.animate.element;[
<!ENTITY % SVG.animate.content
"( %SVG.Description.class; %SVG.animate.extra.content; )*"
>
<!ELEMENT %SVG.animate.qname; %SVG.animate.content; >
<!-- end of SVG.animate.element -->]]>
<!ENTITY % SVG.animate.attlist "INCLUDE" >
<![%SVG.animate.attlist;[
<!ATTLIST %SVG.animate.qname;
%SVG.Core.attrib;
%SVG.Conditional.attrib;
%SVG.AnimationEvents.attrib;
%SVG.External.attrib;
%SVG.Animation.attrib;
%SVG.AnimationAttribute.attrib;
%SVG.AnimationTiming.attrib;
%SVG.AnimationValue.attrib;
%SVG.AnimationAddtion.attrib;
>
<!-- end of SVG.animate.attlist -->]]>
<!-- set: Set Element .................................. -->
<!ENTITY % SVG.set.extra.content "" >
<!ENTITY % SVG.set.element "INCLUDE" >
<![%SVG.set.element;[
<!ENTITY % SVG.set.content
"( %SVG.Description.class; %SVG.set.extra.content; )*"
>
<!ELEMENT %SVG.set.qname; %SVG.set.content; >
<!-- end of SVG.set.element -->]]>
<!ENTITY % SVG.set.attlist "INCLUDE" >
<![%SVG.set.attlist;[
<!ATTLIST %SVG.set.qname;
%SVG.Core.attrib;
%SVG.Conditional.attrib;
%SVG.AnimationEvents.attrib;
%SVG.External.attrib;
%SVG.Animation.attrib;
%SVG.AnimationAttribute.attrib;
%SVG.AnimationTiming.attrib;
to CDATA #IMPLIED
>
<!-- end of SVG.set.attlist -->]]>
<!-- animateMotion: Animate Motion Element ............. -->
<!ENTITY % SVG.animateMotion.extra.content "" >
<!ENTITY % SVG.animateMotion.element "INCLUDE" >
<![%SVG.animateMotion.element;[
<!ENTITY % SVG.animateMotion.content
"( ( %SVG.mpath.qname;,
( %SVG.Description.class; %SVG.animateMotion.extra.content; )* )
| ( ( %SVG.Description.class; %SVG.animateMotion.extra.content; )+,
%SVG.mpath.qname;,
( ( %SVG.Description.class; %SVG.animateMotion.extra.content; )* )? ) )"
>
<!ELEMENT %SVG.animateMotion.qname; %SVG.animateMotion.content; >
<!-- end of SVG.animateMotion.element -->]]>
<!ENTITY % SVG.animateMotion.attlist "INCLUDE" >
<![%SVG.animateMotion.attlist;[
<!ATTLIST %SVG.animateMotion.qname;
%SVG.Core.attrib;
%SVG.Conditional.attrib;
%SVG.AnimationEvents.attrib;
%SVG.External.attrib;
%SVG.Animation.attrib;
%SVG.AnimationTiming.attrib;
%SVG.AnimationAddtion.attrib;
calcMode ( discrete | linear | paced | spline ) 'paced'
values CDATA #IMPLIED
keyTimes CDATA #IMPLIED
keySplines CDATA #IMPLIED
from CDATA #IMPLIED
to CDATA #IMPLIED
by CDATA #IMPLIED
path CDATA #IMPLIED
keyPoints CDATA #IMPLIED
rotate CDATA #IMPLIED
origin CDATA #IMPLIED
>
<!-- end of SVG.animateMotion.attlist -->]]>
<!-- animateColor: Animate Color Element ............... -->
<!ENTITY % SVG.animateColor.extra.content "" >
<!ENTITY % SVG.animateColor.element "INCLUDE" >
<![%SVG.animateColor.element;[
<!ENTITY % SVG.animateColor.content
"( %SVG.Description.class; %SVG.animateColor.extra.content; )*"
>
<!ELEMENT %SVG.animateColor.qname; %SVG.animateColor.content; >
<!-- end of SVG.animateColor.element -->]]>
<!ENTITY % SVG.animateColor.attlist "INCLUDE" >
<![%SVG.animateColor.attlist;[
<!ATTLIST %SVG.animateColor.qname;
%SVG.Core.attrib;
%SVG.Conditional.attrib;
%SVG.AnimationEvents.attrib;
%SVG.External.attrib;
%SVG.Animation.attrib;
%SVG.AnimationAttribute.attrib;
%SVG.AnimationTiming.attrib;
%SVG.AnimationValue.attrib;
%SVG.AnimationAddtion.attrib;
>
<!-- end of SVG.animateColor.attlist -->]]>
<!-- animateTransform: Animate Transform Element ....... -->
<!ENTITY % SVG.animateTransform.extra.content "" >
<!ENTITY % SVG.animateTransform.element "INCLUDE" >
<![%SVG.animateTransform.element;[
<!ENTITY % SVG.animateTransform.content
"( %SVG.Description.class; %SVG.animateTransform.extra.content; )*"
>
<!ELEMENT %SVG.animateTransform.qname; %SVG.animateTransform.content; >
<!-- end of SVG.animateTransform.element -->]]>
<!ENTITY % SVG.animateTransform.attlist "INCLUDE" >
<![%SVG.animateTransform.attlist;[
<!ATTLIST %SVG.animateTransform.qname;
%SVG.Core.attrib;
%SVG.Conditional.attrib;
%SVG.AnimationEvents.attrib;
%SVG.External.attrib;
%SVG.Animation.attrib;
%SVG.AnimationAttribute.attrib;
%SVG.AnimationTiming.attrib;
%SVG.AnimationValue.attrib;
%SVG.AnimationAddtion.attrib;
type ( translate | scale | rotate | skewX | skewY ) 'translate'
>
<!-- end of SVG.animateTransform.attlist -->]]>
<!-- mpath: Motion Path Element ........................ -->
<!ENTITY % SVG.mpath.extra.content "" >
<!ENTITY % SVG.mpath.element "INCLUDE" >
<![%SVG.mpath.element;[
<!ENTITY % SVG.mpath.content
"( %SVG.Description.class; %SVG.mpath.extra.content; )*"
>
<!ELEMENT %SVG.mpath.qname; %SVG.mpath.content; >
<!-- end of SVG.mpath.element -->]]>
<!ENTITY % SVG.mpath.attlist "INCLUDE" >
<![%SVG.mpath.attlist;[
<!ATTLIST %SVG.mpath.qname;
%SVG.Core.attrib;
%SVG.XLinkRequired.attrib;
%SVG.External.attrib;
>
<!-- end of SVG.mpath.attlist -->]]>
<!-- end of svg-animation.mod -->
Font Module defines the Font.class element collection.
| Collection name | Elements in collection |
|---|---|
| Font.class | font, font-face |
<!-- ....................................................................... -->
<!-- SVG 1.1 Font Module ................................................... -->
<!-- file: svg-font.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Font//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-font.mod"
....................................................................... -->
<!-- Font
font, font-face, glyph, missing-glyph, hkern, vkern, font-face-src,
font-face-uri, font-face-format, font-face-name
This module declares markup to provide support for template.
-->
<!-- Qualified Names (Default) ......................... -->
<!ENTITY % SVG.font.qname "font" >
<!ENTITY % SVG.font-face.qname "font-face" >
<!ENTITY % SVG.glyph.qname "glyph" >
<!ENTITY % SVG.missing-glyph.qname "missing-glyph" >
<!ENTITY % SVG.hkern.qname "hkern" >
<!ENTITY % SVG.vkern.qname "vkern" >
<!ENTITY % SVG.font-face-src.qname "font-face-src" >
<!ENTITY % SVG.font-face-uri.qname "font-face-uri" >
<!ENTITY % SVG.font-face-format.qname "font-face-format" >
<!ENTITY % SVG.font-face-name.qname "font-face-name" >
<!-- Attribute Collections (Default) ................... -->
<!ENTITY % SVG.Core.attrib "" >
<!ENTITY % SVG.Container.attrib "" >
<!ENTITY % SVG.Style.attrib "" >
<!ENTITY % SVG.Viewport.attrib "" >
<!ENTITY % SVG.Text.attrib "" >
<!ENTITY % SVG.TextContent.attrib "" >
<!ENTITY % SVG.Font.attrib "" >
<!ENTITY % SVG.Paint.attrib "" >
<!ENTITY % SVG.Color.attrib "" >
<!ENTITY % SVG.Opacity.attrib "" >
<!ENTITY % SVG.Graphics.attrib "" >
<!ENTITY % SVG.Marker.attrib "" >
<!ENTITY % SVG.ColorProfile.attrib "" >
<!ENTITY % SVG.Gradient.attrib "" >
<!ENTITY % SVG.Clip.attrib "" >
<!ENTITY % SVG.Mask.attrib "" >
<!ENTITY % SVG.Filter.attrib "" >
<!ENTITY % SVG.FilterColor.attrib "" >
<!ENTITY % SVG.Cursor.attrib "" >
<!ENTITY % SVG.XLinkRequired.attrib "" >
<!ENTITY % SVG.External.attrib "" >
<!-- SVG.Font.class .................................... -->
<!ENTITY % SVG.Font.extra.class "" >
<!ENTITY % SVG.Font.class
"| %SVG.font.qname; | %SVG.font-face.qname; %SVG.Font.extra.class;"
>
<!-- SVG.Presentation.attrib ........................... -->
<!ENTITY % SVG.Presentation.extra.attrib "" >
<!ENTITY % SVG.Presentation.attrib
"%SVG.Container.attrib;
%SVG.Viewport.attrib;
%SVG.Text.attrib;
%SVG.TextContent.attrib;
%SVG.Font.attrib;
%SVG.Paint.attrib;
%SVG.Color.attrib;
%SVG.Opacity.attrib;
%SVG.Graphics.attrib;
%SVG.Marker.attrib;
%SVG.ColorProfile.attrib;
%SVG.Gradient.attrib;
%SVG.Clip.attrib;
%SVG.Mask.attrib;
%SVG.Filter.attrib;
%SVG.FilterColor.attrib;
%SVG.Cursor.attrib;
flood-color %SVGColor.datatype; #IMPLIED
flood-opacity %OpacityValue.datatype; #IMPLIED
lighting-color %SVGColor.datatype; #IMPLIED
%SVG.Presentation.extra.attrib;"
>
<!-- font: Font Element ................................ -->
<!ENTITY % SVG.font.extra.content "" >
<!ENTITY % SVG.font.element "INCLUDE" >
<![%SVG.font.element;[
<!ENTITY % SVG.font.content
"( %SVG.Description.class; | %SVG.font-face.qname;
| %SVG.missing-glyph.qname; | %SVG.glyph.qname; | %SVG.hkern.qname;
| %SVG.vkern.qname; %SVG.font.extra.content; )*"
>
<!ELEMENT %SVG.font.qname; %SVG.font.content; >
<!-- end of SVG.font.element -->]]>
<!ENTITY % SVG.font.attlist "INCLUDE" >
<![%SVG.font.attlist;[
<!ATTLIST %SVG.font.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.External.attrib;
horiz-origin-x %Number.datatype; #IMPLIED
horiz-origin-y %Number.datatype; #IMPLIED
horiz-adv-x %Number.datatype; #REQUIRED
vert-origin-x %Number.datatype; #IMPLIED
vert-origin-y %Number.datatype; #IMPLIED
vert-adv-y %Number.datatype; #IMPLIED
>
<!-- end of SVG.font.attlist -->]]>
<!-- font-face: Font Face Element ...................... -->
<!ENTITY % SVG.font-face.extra.content "" >
<!ENTITY % SVG.font-face.element "INCLUDE" >
<![%SVG.font-face.element;[
<!ENTITY % SVG.font-face.content
"( ( %SVG.font-face-src.qname;,
( %SVG.Description.class; %SVG.font-face.extra.content; )* )
| ( ( %SVG.Description.class; %SVG.font-face.extra.content; )+,
%SVG.font-face-src.qname;,
( ( %SVG.Description.class; %SVG.font-face.extra.content; )* )? ) )"
>
<!ELEMENT %SVG.font-face.qname; %SVG.font-face.content; >
<!-- end of SVG.font-face.element -->]]>
<!ENTITY % SVG.font-face.attlist "INCLUDE" >
<![%SVG.font-face.attlist;[
<!ATTLIST %SVG.font-face.qname;
%SVG.Core.attrib;
font-family CDATA #IMPLIED
font-style CDATA #IMPLIED
font-variant CDATA #IMPLIED
font-weight CDATA #IMPLIED
font-stretch CDATA #IMPLIED
font-size CDATA #IMPLIED
unicode-range CDATA #IMPLIED
units-per-em %Number.datatype; #IMPLIED
panose-1 CDATA #IMPLIED
stemv %Number.datatype; #IMPLIED
stemh %Number.datatype; #IMPLIED
slope %Number.datatype; #IMPLIED
cap-height %Number.datatype; #IMPLIED
x-height %Number.datatype; #IMPLIED
accent-height %Number.datatype; #IMPLIED
ascent %Number.datatype; #IMPLIED
descent %Number.datatype; #IMPLIED
widths CDATA #IMPLIED
bbox CDATA #IMPLIED
ideographic %Number.datatype; #IMPLIED
alphabetic %Number.datatype; #IMPLIED
mathematical %Number.datatype; #IMPLIED
hanging %Number.datatype; #IMPLIED
v-ideographic %Number.datatype; #IMPLIED
v-alphabetic %Number.datatype; #IMPLIED
v-mathematical %Number.datatype; #IMPLIED
v-hanging %Number.datatype; #IMPLIED
underline-position %Number.datatype; #IMPLIED
underline-thickness %Number.datatype; #IMPLIED
strikethrough-position %Number.datatype; #IMPLIED
strikethrough-thickness %Number.datatype; #IMPLIED
overline-position %Number.datatype; #IMPLIED
overline-thickness %Number.datatype; #IMPLIED
>
<!-- end of SVG.font-face.attlist -->]]>
<!-- glyph: Glyph Element .............................. -->
<!ENTITY % SVG.glyph.extra.content "" >
<!ENTITY % SVG.glyph.element "INCLUDE" >
<![%SVG.glyph.element;[
<!ENTITY % SVG.glyph.content
"( %SVG.Description.class; | %SVG.Animation.class; %SVG.Structure.class;
%SVG.Conditional.class; %SVG.Image.class; %SVG.Style.class;
%SVG.Shape.class; %SVG.Text.class; %SVG.Marker.class;
%SVG.ColorProfile.class; %SVG.Gradient.class; %SVG.Pattern.class;
%SVG.Clip.class; %SVG.Mask.class; %SVG.Filter.class; %SVG.Cursor.class;
%SVG.Hyperlink.class; %SVG.View.class; %SVG.Script.class;
%SVG.Font.class; %SVG.Extensibility.class; %SVG.glyph.extra.content; )*"
>
<!ELEMENT %SVG.glyph.qname; %SVG.glyph.content; >
<!-- end of SVG.glyph.element -->]]>
<!ENTITY % SVG.glyph.attlist "INCLUDE" >
<![%SVG.glyph.attlist;[
<!ATTLIST %SVG.glyph.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
unicode CDATA #IMPLIED
glyph-name CDATA #IMPLIED
d %PathData.datatype; #IMPLIED
orientation CDATA #IMPLIED
arabic-form CDATA #IMPLIED
lang %LanguageCodes.datatype; #IMPLIED
horiz-adv-x %Number.datatype; #IMPLIED
vert-origin-x %Number.datatype; #IMPLIED
vert-origin-y %Number.datatype; #IMPLIED
vert-adv-y %Number.datatype; #IMPLIED
>
<!-- end of SVG.glyph.attlist -->]]>
<!-- missing-glyph: Missing Glyph Element .............. -->
<!ENTITY % SVG.missing-glyph.extra.content "" >
<!ENTITY % SVG.missing-glyph.element "INCLUDE" >
<![%SVG.missing-glyph.element;[
<!ENTITY % SVG.missing-glyph.content
"( %SVG.Description.class; | %SVG.Animation.class; %SVG.Structure.class;
%SVG.Conditional.class; %SVG.Image.class; %SVG.Style.class;
%SVG.Shape.class; %SVG.Text.class; %SVG.Marker.class;
%SVG.ColorProfile.class; %SVG.Gradient.class; %SVG.Pattern.class;
%SVG.Clip.class; %SVG.Mask.class; %SVG.Filter.class; %SVG.Cursor.class;
%SVG.Hyperlink.class; %SVG.View.class; %SVG.Script.class;
%SVG.Font.class; %SVG.Extensibility.class; %SVG.missing-glyph.extra.content; )*"
>
<!ELEMENT %SVG.missing-glyph.qname; %SVG.missing-glyph.content; >
<!-- end of SVG.missing-glyph.element -->]]>
<!ENTITY % SVG.missing-glyph.attlist "INCLUDE" >
<![%SVG.missing-glyph.attlist;[
<!ATTLIST %SVG.missing-glyph.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
d %PathData.datatype; #IMPLIED
horiz-adv-x %Number.datatype; #IMPLIED
vert-origin-x %Number.datatype; #IMPLIED
vert-origin-y %Number.datatype; #IMPLIED
vert-adv-y %Number.datatype; #IMPLIED
>
<!-- end of SVG.missing-glyph.attlist -->]]>
<!-- hkern: Horizontal Kerning Element ................. -->
<!ENTITY % SVG.hkern.element "INCLUDE" >
<![%SVG.hkern.element;[
<!ENTITY % SVG.hkern.content "EMPTY" >
<!ELEMENT %SVG.hkern.qname; %SVG.hkern.content; >
<!-- end of SVG.hkern.element -->]]>
<!ENTITY % SVG.hkern.attlist "INCLUDE" >
<![%SVG.hkern.attlist;[
<!ATTLIST %SVG.hkern.qname;
%SVG.Core.attrib;
u1 CDATA #IMPLIED
g1 CDATA #IMPLIED
u2 CDATA #IMPLIED
g2 CDATA #IMPLIED
k %Number.datatype; #REQUIRED
>
<!-- end of SVG.hkern.attlist -->]]>
<!-- vkern: Vertical Kerning Element ................... -->
<!ENTITY % SVG.vkern.element "INCLUDE" >
<![%SVG.vkern.element;[
<!ENTITY % SVG.vkern.content "EMPTY" >
<!ELEMENT %SVG.vkern.qname; %SVG.vkern.content; >
<!-- end of SVG.vkern.element -->]]>
<!ENTITY % SVG.vkern.attlist "INCLUDE" >
<![%SVG.vkern.attlist;[
<!ATTLIST %SVG.vkern.qname;
%SVG.Core.attrib;
u1 CDATA #IMPLIED
g1 CDATA #IMPLIED
u2 CDATA #IMPLIED
g2 CDATA #IMPLIED
k %Number.datatype; #REQUIRED
>
<!-- end of SVG.vkern.attlist -->]]>
<!-- font-face-src: Font Face Source Element ........... -->
<!ENTITY % SVG.font-face-src.extra.content "" >
<!ENTITY % SVG.font-face-src.element "INCLUDE" >
<![%SVG.font-face-src.element;[
<!ENTITY % SVG.font-face-src.content
"( %SVG.font-face-uri.qname; | %SVG.font-face-name.qname;
%SVG.font-face-src.extra.content; )+"
>
<!ELEMENT %SVG.font-face-src.qname; %SVG.font-face-src.content; >
<!-- end of SVG.font-face-src.element -->]]>
<!ENTITY % SVG.font-face-src.attlist "INCLUDE" >
<![%SVG.font-face-src.attlist;[
<!ATTLIST %SVG.font-face-src.qname;
%SVG.Core.attrib;
>
<!-- end of SVG.font-face-src.attlist -->]]>
<!-- font-face-uri: Font Face URI Element .............. -->
<!ENTITY % SVG.font-face-uri.extra.content "" >
<!ENTITY % SVG.font-face-uri.element "INCLUDE" >
<![%SVG.font-face-uri.element;[
<!ENTITY % SVG.font-face-uri.content
"( %SVG.font-face-format.qname; %SVG.font-face-uri.extra.content; )*"
>
<!ELEMENT %SVG.font-face-uri.qname; %SVG.font-face-uri.content; >
<!-- end of SVG.font-face-uri.element -->]]>
<!ENTITY % SVG.font-face-uri.attlist "INCLUDE" >
<![%SVG.font-face-uri.attlist;[
<!ATTLIST %SVG.font-face-uri.qname;
%SVG.Core.attrib;
%SVG.XLinkRequired.attrib;
>
<!-- end of SVG.font-face-uri.attlist -->]]>
<!-- font-face-format: Font Face Format Element ........ -->
<!ENTITY % SVG.font-face-format.element "INCLUDE" >
<![%SVG.font-face-format.element;[
<!ENTITY % SVG.font-face-format.content "EMPTY" >
<!ELEMENT %SVG.font-face-format.qname; %SVG.font-face-format.content; >
<!-- end of SVG.font-face-format.element -->]]>
<!ENTITY % SVG.font-face-format.attlist "INCLUDE" >
<![%SVG.font-face-format.attlist;[
<!ATTLIST %SVG.font-face-format.qname;
%SVG.Core.attrib;
string CDATA #IMPLIED
>
<!-- end of SVG.font-face-format.attlist -->]]>
<!-- font-face-name: Font Face Name Element ............ -->
<!ENTITY % SVG.font-face-name.element "INCLUDE" >
<![%SVG.font-face-name.element;[
<!ENTITY % SVG.font-face-name.content "EMPTY" >
<!ELEMENT %SVG.font-face-name.qname; %SVG.font-face-name.content; >
<!-- end of SVG.font-face-name.element -->]]>
<!ENTITY % SVG.font-face-name.attlist "INCLUDE" >
<![%SVG.font-face-name.attlist;[
<!ATTLIST %SVG.font-face-name.qname;
%SVG.Core.attrib;
name CDATA #IMPLIED
>
<!-- end of SVG.font-face-name.attlist -->]]>
<!-- end of svg-font.mod -->
Basic Font Module defines the Font.class element collection.
| Collection name | Elements in collection |
|---|---|
| Font.class | font, font-face |
<!-- ....................................................................... -->
<!-- SVG 1.1 Basic Font Module ............................................. -->
<!-- file: svg-basic-font.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Basic Font//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-basic-font.mod"
....................................................................... -->
<!-- Basic Font
font, font-face, glyph, missing-glyph, hkern, font-face-src,
font-face-name
This module declares markup to provide support for template.
-->
<!-- Qualified Names (Default) ......................... -->
<!ENTITY % SVG.font.qname "font" >
<!ENTITY % SVG.font-face.qname "font-face" >
<!ENTITY % SVG.glyph.qname "glyph" >
<!ENTITY % SVG.missing-glyph.qname "missing-glyph" >
<!ENTITY % SVG.hkern.qname "hkern" >
<!ENTITY % SVG.font-face-src.qname "font-face-src" >
<!ENTITY % SVG.font-face-name.qname "font-face-name" >
<!-- Attribute Collections (Default) ................... -->
<!ENTITY % SVG.Core.attrib "" >
<!ENTITY % SVG.Container.attrib "" >
<!ENTITY % SVG.Style.attrib "" >
<!ENTITY % SVG.Viewport.attrib "" >
<!ENTITY % SVG.Text.attrib "" >
<!ENTITY % SVG.TextContent.attrib "" >
<!ENTITY % SVG.Font.attrib "" >
<!ENTITY % SVG.Paint.attrib "" >
<!ENTITY % SVG.Color.attrib "" >
<!ENTITY % SVG.Opacity.attrib "" >
<!ENTITY % SVG.Graphics.attrib "" >
<!ENTITY % SVG.Marker.attrib "" >
<!ENTITY % SVG.ColorProfile.attrib "" >
<!ENTITY % SVG.Gradient.attrib "" >
<!ENTITY % SVG.Clip.attrib "" >
<!ENTITY % SVG.Mask.attrib "" >
<!ENTITY % SVG.Filter.attrib "" >
<!ENTITY % SVG.FilterColor.attrib "" >
<!ENTITY % SVG.Cursor.attrib "" >
<!ENTITY % SVG.XLinkRequired.attrib "" >
<!ENTITY % SVG.External.attrib "" >
<!-- SVG.Font.class .................................... -->
<!ENTITY % SVG.Font.extra.class "" >
<!ENTITY % SVG.Font.class
"| %SVG.font.qname; | %SVG.font-face.qname; %SVG.Font.extra.class;"
>
<!-- font: Font Element ................................ -->
<!ENTITY % SVG.font.extra.content "" >
<!ENTITY % SVG.font.element "INCLUDE" >
<![%SVG.font.element;[
<!ENTITY % SVG.font.content
"( %SVG.Description.class; | %SVG.font-face.qname;
| %SVG.missing-glyph.qname; | %SVG.glyph.qname; | %SVG.hkern.qname;
%SVG.font.extra.content; )*"
>
<!ELEMENT %SVG.font.qname; %SVG.font.content; >
<!-- end of SVG.font.element -->]]>
<!ENTITY % SVG.font.attlist "INCLUDE" >
<![%SVG.font.attlist;[
<!ATTLIST %SVG.font.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
%SVG.External.attrib;
horiz-origin-x %Number.datatype; #IMPLIED
horiz-adv-x %Number.datatype; #REQUIRED
>
<!-- end of SVG.font.attlist -->]]>
<!-- font-face: Font Face Element ...................... -->
<!ENTITY % SVG.font-face.extra.content "" >
<!ENTITY % SVG.font-face.element "INCLUDE" >
<![%SVG.font-face.element;[
<!ENTITY % SVG.font-face.content
"( ( %SVG.font-face-src.qname;,
( %SVG.Description.class; %SVG.font-face.extra.content; )* )
| ( ( %SVG.Description.class; %SVG.font-face.extra.content; )+,
%SVG.font-face-src.qname;,
( ( %SVG.Description.class; %SVG.font-face.extra.content; )* )? ) )"
>
<!ELEMENT %SVG.font-face.qname; %SVG.font-face.content; >
<!-- end of SVG.font-face.element -->]]>
<!ENTITY % SVG.font-face.attlist "INCLUDE" >
<![%SVG.font-face.attlist;[
<!ATTLIST %SVG.font-face.qname;
%SVG.Core.attrib;
font-family CDATA #IMPLIED
font-style CDATA #IMPLIED
font-variant CDATA #IMPLIED
font-weight CDATA #IMPLIED
font-stretch CDATA #IMPLIED
font-size CDATA #IMPLIED
unicode-range CDATA #IMPLIED
units-per-em %Number.datatype; #IMPLIED
panose-1 CDATA #IMPLIED
stemv %Number.datatype; #IMPLIED
stemh %Number.datatype; #IMPLIED
slope %Number.datatype; #IMPLIED
cap-height %Number.datatype; #IMPLIED
x-height %Number.datatype; #IMPLIED
accent-height %Number.datatype; #IMPLIED
ascent %Number.datatype; #IMPLIED
descent %Number.datatype; #IMPLIED
widths CDATA #IMPLIED
bbox CDATA #IMPLIED
ideographic %Number.datatype; #IMPLIED
alphabetic %Number.datatype; #IMPLIED
mathematical %Number.datatype; #IMPLIED
hanging %Number.datatype; #IMPLIED
underline-position %Number.datatype; #IMPLIED
underline-thickness %Number.datatype; #IMPLIED
strikethrough-position %Number.datatype; #IMPLIED
strikethrough-thickness %Number.datatype; #IMPLIED
overline-position %Number.datatype; #IMPLIED
overline-thickness %Number.datatype; #IMPLIED
>
<!-- end of SVG.font-face.attlist -->]]>
<!-- glyph: Glyph Element .............................. -->
<!ENTITY % SVG.glyph.extra.content "" >
<!ENTITY % SVG.glyph.element "INCLUDE" >
<![%SVG.glyph.element;[
<!ENTITY % SVG.glyph.content
"( %SVG.Description.class; %SVG.glyph.extra.content; )*"
>
<!ELEMENT %SVG.glyph.qname; %SVG.glyph.content; >
<!-- end of SVG.glyph.element -->]]>
<!ENTITY % SVG.glyph.attlist "INCLUDE" >
<![%SVG.glyph.attlist;[
<!ATTLIST %SVG.glyph.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
unicode CDATA #IMPLIED
glyph-name CDATA #IMPLIED
d %PathData.datatype; #IMPLIED
arabic-form CDATA #IMPLIED
lang %LanguageCodes.datatype; #IMPLIED
horiz-adv-x %Number.datatype; #IMPLIED
>
<!-- end of SVG.glyph.attlist -->]]>
<!-- missing-glyph: Missing Glyph Element .............. -->
<!ENTITY % SVG.missing-glyph.extra.content "" >
<!ENTITY % SVG.missing-glyph.element "INCLUDE" >
<![%SVG.missing-glyph.element;[
<!ENTITY % SVG.missing-glyph.content
"( %SVG.Description.class; %SVG.missing-glyph.extra.content; )*"
>
<!ELEMENT %SVG.missing-glyph.qname; %SVG.missing-glyph.content; >
<!-- end of SVG.missing-glyph.element -->]]>
<!ENTITY % SVG.missing-glyph.attlist "INCLUDE" >
<![%SVG.missing-glyph.attlist;[
<!ATTLIST %SVG.missing-glyph.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
d %PathData.datatype; #IMPLIED
horiz-adv-x %Number.datatype; #IMPLIED
>
<!-- end of SVG.missing-glyph.attlist -->]]>
<!-- hkern: Horizontal Kerning Element ................. -->
<!ENTITY % SVG.hkern.element "INCLUDE" >
<![%SVG.hkern.element;[
<!ENTITY % SVG.hkern.content "EMPTY" >
<!ELEMENT %SVG.hkern.qname; %SVG.hkern.content; >
<!-- end of SVG.hkern.element -->]]>
<!ENTITY % SVG.hkern.attlist "INCLUDE" >
<![%SVG.hkern.attlist;[
<!ATTLIST %SVG.hkern.qname;
%SVG.Core.attrib;
u1 CDATA #IMPLIED
g1 CDATA #IMPLIED
u2 CDATA #IMPLIED
g2 CDATA #IMPLIED
k %Number.datatype; #REQUIRED
>
<!-- end of SVG.hkern.attlist -->]]>
<!-- font-face-src: Font Face Source Element ........... -->
<!ENTITY % SVG.font-face-src.extra.content "" >
<!ENTITY % SVG.font-face-src.element "INCLUDE" >
<![%SVG.font-face-src.element;[
<!ENTITY % SVG.font-face-src.content
"( %SVG.font-face-name.qname; %SVG.font-face-src.extra.content; )+"
>
<!ELEMENT %SVG.font-face-src.qname; %SVG.font-face-src.content; >
<!-- end of SVG.font-face-src.element -->]]>
<!ENTITY % SVG.font-face-src.attlist "INCLUDE" >
<![%SVG.font-face-src.attlist;[
<!ATTLIST %SVG.font-face-src.qname;
%SVG.Core.attrib;
>
<!-- end of SVG.font-face-src.attlist -->]]>
<!-- font-face-name: Font Face Name Element ............ -->
<!ENTITY % SVG.font-face-name.element "INCLUDE" >
<![%SVG.font-face-name.element;[
<!ENTITY % SVG.font-face-name.content "EMPTY" >
<!ELEMENT %SVG.font-face-name.qname; %SVG.font-face-name.content; >
<!-- end of SVG.font-face-name.element -->]]>
<!ENTITY % SVG.font-face-name.attlist "INCLUDE" >
<![%SVG.font-face-name.attlist;[
<!ATTLIST %SVG.font-face-name.qname;
%SVG.Core.attrib;
name CDATA #IMPLIED
>
<!-- end of SVG.font-face-name.attlist -->]]>
<!-- end of svg-basic-font.mod -->
Extensibility Module defines the Extensibility.class element collection.
| Collection name | Elements in collection |
|---|---|
| Extensibility.class | foreignObject |
<!-- ....................................................................... -->
<!-- SVG 1.1 Extensibility Module .......................................... -->
<!-- file: svg-extensibility.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Extensibility//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-extensibility.mod"
....................................................................... -->
<!-- Extensibility
foreignObject
This module declares markup to provide support for extensibility.
-->
<!-- Qualified Names (Default) ......................... -->
<!ENTITY % SVG.foreignObject.qname "foreignObject" >
<!-- Attribute Collections (Default) ................... -->
<!ENTITY % SVG.Core.attrib "" >
<!ENTITY % SVG.Conditional.attrib "" >
<!ENTITY % SVG.Style.attrib "" >
<!ENTITY % SVG.Viewport.attrib "" >
<!ENTITY % SVG.Text.attrib "" >
<!ENTITY % SVG.TextContent.attrib "" >
<!ENTITY % SVG.Font.attrib "" >
<!ENTITY % SVG.Paint.attrib "" >
<!ENTITY % SVG.Color.attrib "" >
<!ENTITY % SVG.Opacity.attrib "" >
<!ENTITY % SVG.Graphics.attrib "" >
<!ENTITY % SVG.Marker.attrib "" >
<!ENTITY % SVG.Gradient.attrib "" >
<!ENTITY % SVG.Clip.attrib "" >
<!ENTITY % SVG.Mask.attrib "" >
<!ENTITY % SVG.Filter.attrib "" >
<!ENTITY % SVG.FilterColor.attrib "" >
<!ENTITY % SVG.GraphicalEvents.attrib "" >
<!ENTITY % SVG.Cursor.attrib "" >
<!ENTITY % SVG.External.attrib "" >
<!-- SVG.Extensibility.class ........................... -->
<!ENTITY % SVG.Extensibility.extra.class "" >
<!ENTITY % SVG.Extensibility.class
"| %SVG.foreignObject.qname; %SVG.Extensibility.extra.class;"
>
<!-- SVG.Presentation.attrib ........................... -->
<!ENTITY % SVG.Presentation.extra.attrib "" >
<!ENTITY % SVG.Presentation.attrib
"%SVG.Container.attrib;
%SVG.Viewport.attrib;
%SVG.Text.attrib;
%SVG.TextContent.attrib;
%SVG.Font.attrib;
%SVG.Paint.attrib;
%SVG.Color.attrib;
%SVG.Opacity.attrib;
%SVG.Graphics.attrib;
%SVG.Marker.attrib;
%SVG.ColorProfile.attrib;
%SVG.Gradient.attrib;
%SVG.Clip.attrib;
%SVG.Mask.attrib;
%SVG.Filter.attrib;
%SVG.FilterColor.attrib;
%SVG.Cursor.attrib;
flood-color %SVGColor.datatype; #IMPLIED
flood-opacity %OpacityValue.datatype; #IMPLIED
lighting-color %SVGColor.datatype; #IMPLIED
%SVG.Presentation.extra.attrib;"
>
<!-- foreignObject: Foreign Object Element ............. -->
<!ENTITY % SVG.foreignObject.extra.content "" >
<!ENTITY % SVG.foreignObject.element "INCLUDE" >
<![%SVG.foreignObject.element;[
<!ENTITY % SVG.foreignObject.content
"( #PCDATA %SVG.foreignObject.extra.content; )*"
>
<!ELEMENT %SVG.foreignObject.qname; %SVG.foreignObject.content; >
<!-- end of SVG.foreignObject.element -->]]>
<!ENTITY % SVG.foreignObject.attlist "INCLUDE" >
<![%SVG.foreignObject.attlist;[
<!ATTLIST %SVG.foreignObject.qname;
%SVG.Core.attrib;
%SVG.Conditional.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.GraphicalEvents.attrib;
%SVG.External.attrib;
x %Coordinate.datatype; #IMPLIED
y %Coordinate.datatype; #IMPLIED
width %Length.datatype; #REQUIRED
height %Length.datatype; #REQUIRED
transform %TransformList.datatype; #IMPLIED
>
<!-- end of SVG.foreignObject.attlist -->]]>
<!-- end of svg-extensibility.mod -->
This section contains the DTD driver for the SVG 1.1 document type implementation as an XML DTD. It relies upon SVG 1.1 module implementations defined in Section A.3.
<!-- ....................................................................... -->
<!-- SVG 1.1 DTD ........................................................... -->
<!-- file: svg11.dtd
-->
<!-- SVG 1.1 DTD
This is SVG, a language for describing two-dimensional graphics in XML.
Scalable Vector Graphics (SVG)
Copyright 2001, 2002, 2011 World Wide Web Consortium
(Massachusetts Institute of Technology, Institut National de
Recherche en Informatique et en Automatique, Keio University).
All Rights Reserved.
Permission to use, copy, modify and distribute the SVG DTD and its
accompanying documentation for any purpose and without fee is hereby
granted in perpetuity, provided that the above copyright notice and
this paragraph appear in all copies. copyright holders make no
representation about the suitability of the DTD for any purpose.
It is provided "as is" without expressed or implied warranty.
Author: Jun Fujisawa <fujisawa.jun@canon.co.jp>
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
-->
<!-- This is the driver file for version 1.1 of the SVG DTD.
This DTD is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//DTD SVG 1.1//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
-->
<!ENTITY % SVG.version "-//W3C//DTD SVG 1.1//EN" >
<!-- Use this URI to identify the default namespace:
"http://www.w3.org/2000/svg"
Дивіться the Qualified Names module for information
on the use of namespace prefixes in the DTD.
-->
<!ENTITY % NS.prefixed "IGNORE" >
<!ENTITY % SVG.prefix "" >
<!-- reserved for future use with document profiles -->
<!ENTITY % SVG.profile "" >
<!-- ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: -->
<!-- Pre-Framework Redeclaration Placeholder ..................... -->
<!ENTITY % svg-prefw-redecl.module "IGNORE" >
<![%svg-prefw-redecl.module;[
%svg-prefw-redecl.mod;]]>
<!-- Document Model Module ....................................... -->
<!ENTITY % svg-model.mod
PUBLIC "-//W3C//ENTITIES SVG 1.1 Document Model//EN"
"svg11-model.mod" >
<!-- Attribute Collection Module ................................. -->
<!ENTITY % svg-attribs.mod
PUBLIC "-//W3C//ENTITIES SVG 1.1 Attribute Collection//EN"
"svg11-attribs.mod" >
<!-- Modular Framework Module .................................... -->
<!ENTITY % svg-framework.module "INCLUDE" >
<![%svg-framework.module;[
<!ENTITY % svg-framework.mod
PUBLIC "-//W3C//ENTITIES SVG 1.1 Modular Framework//EN"
"svg-framework.mod" >
%svg-framework.mod;]]>
<!-- Post-Framework Redeclaration Placeholder .................... -->
<!ENTITY % svg-postfw-redecl.module "IGNORE" >
<![%svg-postfw-redecl.module;[
%svg-postfw-redecl.mod;]]>
<!-- ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: -->
<!-- Core Attribute Module ....................................... -->
<!ENTITY % svg-core-attrib.module "INCLUDE" >
<![%svg-core-attrib.module;[
<!ENTITY % svg-core-attrib.mod
PUBLIC "-//W3C//ENTITIES SVG 1.1 Core Attribute//EN"
"svg-core-attrib.mod" >
%svg-core-attrib.mod;]]>
<!-- Container Attribute Module .................................. -->
<!ENTITY % svg-container-attrib.module "INCLUDE" >
<![%svg-container-attrib.module;[
<!ENTITY % svg-container-attrib.mod
PUBLIC "-//W3C//ENTITIES SVG 1.1 Container Attribute//EN"
"svg-container-attrib.mod" >
%svg-container-attrib.mod;]]>
<!-- Viewport Attribute Module ................................... -->
<!ENTITY % svg-viewport-attrib.module "INCLUDE" >
<![%svg-viewport-attrib.module;[
<!ENTITY % svg-viewport-attrib.mod
PUBLIC "-//W3C//ENTITIES SVG 1.1 Viewport Attribute//EN"
"svg-viewport-attrib.mod" >
%svg-viewport-attrib.mod;]]>
<!-- Paint Attribute Module ...................................... -->
<!ENTITY % svg-paint-attrib.module "INCLUDE" >
<![%svg-paint-attrib.module;[
<!ENTITY % svg-paint-attrib.mod
PUBLIC "-//W3C//ENTITIES SVG 1.1 Paint Attribute//EN"
"svg-paint-attrib.mod" >
%svg-paint-attrib.mod;]]>
<!-- Paint Opacity Attribute Module .............................. -->
<!ENTITY % svg-opacity-attrib.module "INCLUDE" >
<![%svg-opacity-attrib.module;[
<!ENTITY % svg-opacity-attrib.mod
PUBLIC "-//W3C//ENTITIES SVG 1.1 Paint Opacity Attribute//EN"
"svg-opacity-attrib.mod" >
%svg-opacity-attrib.mod;]]>
<!-- Graphics Attribute Module ................................... -->
<!ENTITY % svg-graphics-attrib.module "INCLUDE" >
<![%svg-graphics-attrib.module;[
<!ENTITY % svg-graphics-attrib.mod
PUBLIC "-//W3C//ENTITIES SVG 1.1 Graphics Attribute//EN"
"svg-graphics-attrib.mod" >
%svg-graphics-attrib.mod;]]>
<!-- Document Events Attribute Module ............................ -->
<!ENTITY % svg-docevents-attrib.module "INCLUDE" >
<![%svg-docevents-attrib.module;[
<!ENTITY % svg-docevents-attrib.mod
PUBLIC "-//W3C//ENTITIES SVG 1.1 Document Events Attribute//EN"
"svg-docevents-attrib.mod" >
%svg-docevents-attrib.mod;]]>
<!-- Graphical Element Events Attribute Module ................... -->
<!ENTITY % svg-graphevents-attrib.module "INCLUDE" >
<![%svg-graphevents-attrib.module;[
<!ENTITY % svg-graphevents-attrib.mod
PUBLIC "-//W3C//ENTITIES SVG 1.1 Graphical Element Events Attribute//EN"
"svg-graphevents-attrib.mod" >
%svg-graphevents-attrib.mod;]]>
<!-- Animation Events Attribute Module ........................... -->
<!ENTITY % svg-animevents-attrib.module "INCLUDE" >
<![%svg-animevents-attrib.module;[
<!ENTITY % svg-animevents-attrib.mod
PUBLIC "-//W3C//ENTITIES SVG 1.1 Animation Events Attribute//EN"
"svg-animevents-attrib.mod" >
%svg-animevents-attrib.mod;]]>
<!-- XLink Attribute Module ...................................... -->
<!ENTITY % svg-xlink-attrib.module "INCLUDE" >
<![%svg-xlink-attrib.module;[
<!ENTITY % svg-xlink-attrib.mod
PUBLIC "-//W3C//ENTITIES SVG 1.1 XLink Attribute//EN"
"svg-xlink-attrib.mod" >
%svg-xlink-attrib.mod;]]>
<!-- External Resources Attribute Module ......................... -->
<!ENTITY % svg-extresources-attrib.module "INCLUDE" >
<![%svg-extresources-attrib.module;[
<!ENTITY % svg-extresources-attrib.mod
PUBLIC "-//W3C//ENTITIES SVG 1.1 External Resources Attribute//EN"
"svg-extresources-attrib.mod" >
%svg-extresources-attrib.mod;]]>
<!-- ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: -->
<!-- Structure Module ............................................ -->
<!ENTITY % svg-structure.module "INCLUDE" >
<![%svg-structure.module;[
<!ENTITY % svg-structure.mod
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Structure//EN"
"svg-structure.mod" >
%svg-structure.mod;]]>
<!-- Conditional Processing Module ............................... -->
<!ENTITY % svg-conditional.module "INCLUDE" >
<![%svg-conditional.module;[
<!ENTITY % svg-conditional.mod
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Conditional Processing//EN"
"svg-conditional.mod" >
%svg-conditional.mod;]]>
<!-- Image Module ................................................ -->
<!ENTITY % svg-image.module "INCLUDE" >
<![%svg-image.module;[
<!ENTITY % svg-image.mod
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Image//EN"
"svg-image.mod" >
%svg-image.mod;]]>
<!-- Style Module ................................................ -->
<!ENTITY % svg-style.module "INCLUDE" >
<![%svg-style.module;[
<!ENTITY % svg-style.mod
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Style//EN"
"svg-style.mod" >
%svg-style.mod;]]>
<!-- Shape Module ................................................ -->
<!ENTITY % svg-shape.module "INCLUDE" >
<![%svg-shape.module;[
<!ENTITY % svg-shape.mod
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Shape//EN"
"svg-shape.mod" >
%svg-shape.mod;]]>
<!-- Text Module ................................................. -->
<!ENTITY % svg-text.module "INCLUDE" >
<![%svg-text.module;[
<!ENTITY % svg-text.mod
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Text//EN"
"svg-text.mod" >
%svg-text.mod;]]>
<!-- Marker Module ............................................... -->
<!ENTITY % svg-marker.module "INCLUDE" >
<![%svg-marker.module;[
<!ENTITY % svg-marker.mod
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Marker//EN"
"svg-marker.mod" >
%svg-marker.mod;]]>
<!-- Color Profile Module ........................................ -->
<!ENTITY % svg-profile.module "INCLUDE" >
<![%svg-profile.module;[
<!ENTITY % svg-profile.mod
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Color Profile//EN"
"svg-profile.mod" >
%svg-profile.mod;]]>
<!-- Gradient Module ............................................. -->
<!ENTITY % svg-gradient.module "INCLUDE" >
<![%svg-gradient.module;[
<!ENTITY % svg-gradient.mod
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Gradient//EN"
"svg-gradient.mod" >
%svg-gradient.mod;]]>
<!-- Pattern Module .............................................. -->
<!ENTITY % svg-pattern.module "INCLUDE" >
<![%svg-pattern.module;[
<!ENTITY % svg-pattern.mod
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Pattern//EN"
"svg-pattern.mod" >
%svg-pattern.mod;]]>
<!-- Clip Module ................................................. -->
<!ENTITY % svg-clip.module "INCLUDE" >
<![%svg-clip.module;[
<!ENTITY % svg-clip.mod
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Clip//EN"
"svg-clip.mod" >
%svg-clip.mod;]]>
<!-- Mask Module ................................................. -->
<!ENTITY % svg-mask.module "INCLUDE" >
<![%svg-mask.module;[
<!ENTITY % svg-mask.mod
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Mask//EN"
"svg-mask.mod" >
%svg-mask.mod;]]>
<!-- Filter Module ............................................... -->
<!ENTITY % svg-filter.module "INCLUDE" >
<![%svg-filter.module;[
<!ENTITY % svg-filter.mod
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Filter//EN"
"svg-filter.mod" >
%svg-filter.mod;]]>
<!-- Cursor Module ............................................... -->
<!ENTITY % svg-cursor.module "INCLUDE" >
<![%svg-cursor.module;[
<!ENTITY % svg-cursor.mod
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Cursor//EN"
"svg-cursor.mod" >
%svg-cursor.mod;]]>
<!-- Hyperlinking Module ......................................... -->
<!ENTITY % svg-hyperlink.module "INCLUDE" >
<![%svg-hyperlink.module;[
<!ENTITY % svg-hyperlink.mod
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Hyperlinking//EN"
"svg-hyperlink.mod" >
%svg-hyperlink.mod;]]>
<!-- View Module ................................................. -->
<!ENTITY % svg-view.module "INCLUDE" >
<![%svg-view.module;[
<!ENTITY % svg-view.mod
PUBLIC "-//W3C//ELEMENTS SVG 1.1 View//EN"
"svg-view.mod" >
%svg-view.mod;]]>
<!-- Scripting Module ............................................ -->
<!ENTITY % svg-script.module "INCLUDE" >
<![%svg-script.module;[
<!ENTITY % svg-script.mod
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Scripting//EN"
"svg-script.mod" >
%svg-script.mod;]]>
<!-- Animation Module ............................................ -->
<!ENTITY % svg-animation.module "INCLUDE" >
<![%svg-animation.module;[
<!ENTITY % svg-animation.mod
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Animation//EN"
"svg-animation.mod" >
%svg-animation.mod;]]>
<!-- Font Module ................................................. -->
<!ENTITY % svg-font.module "INCLUDE" >
<![%svg-font.module;[
<!ENTITY % svg-font.mod
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Font//EN"
"svg-font.mod" >
%svg-font.mod;]]>
<!-- Extensibility Module ........................................ -->
<!ENTITY % svg-extensibility.module "INCLUDE" >
<![%svg-extensibility.module;[
<!ENTITY % svg-extensibility.mod
PUBLIC "-//W3C//ELEMENTS SVG 1.1 Extensibility//EN"
"svg-extensibility.mod" >
%svg-extensibility.mod;]]>
<!-- end of SVG 1.1 DTD .................................................... -->
<!-- ....................................................................... -->
A SVG Family Document Type (such as SVG 1.1) must define the content model that it uses. This is done through a separate content model module that is instantiated by the SVG Modular Framework. content model module and the SVG 1.1 DTD Driver (above) work together to customize the module implementations to the document type's specific requirements. content model module for SVG 1.1 is defined below:
<!-- ....................................................................... -->
<!-- SVG 1.1 Document Model Module ......................................... -->
<!-- file: svg11-model.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ENTITIES SVG 1.1 Document Model//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-model.mod"
....................................................................... -->
<!-- SVG 1.1 Document Model
This module описує the groupings of elements that make up
common content models for SVG elements.
-->
<!-- module: svg-structure.mod ......................... -->
<!ENTITY % SVG.Description.extra.class "" >
<!ENTITY % SVG.Description.class
"%SVG.desc.qname; | %SVG.title.qname; | %SVG.metadata.qname;
%SVG.Description.extra.class;"
>
<!ENTITY % SVG.Use.extra.class "" >
<!ENTITY % SVG.Use.class
"| %SVG.use.qname; %SVG.Use.extra.class;"
>
<!ENTITY % SVG.Structure.extra.class "" >
<!ENTITY % SVG.Structure.class
"| %SVG.svg.qname; | %SVG.g.qname; | %SVG.defs.qname; | %SVG.symbol.qname;
%SVG.Use.class; %SVG.Structure.extra.class;"
>
<!-- module: svg-conditional.mod ....................... -->
<!ENTITY % SVG.Conditional.extra.class "" >
<!ENTITY % SVG.Conditional.class
"| %SVG.switch.qname; %SVG.Conditional.extra.class;"
>
<!-- module: svg-image.mod ............................. -->
<!ENTITY % SVG.Image.extra.class "" >
<!ENTITY % SVG.Image.class
"| %SVG.image.qname; %SVG.Image.extra.class;"
>
<!-- module: svg-style.mod ............................. -->
<!ENTITY % SVG.Style.extra.class "" >
<!ENTITY % SVG.Style.class
"| %SVG.style.qname; %SVG.Style.extra.class;"
>
<!-- module: svg-shape.mod ............................. -->
<!ENTITY % SVG.Shape.extra.class "" >
<!ENTITY % SVG.Shape.class
"| %SVG.path.qname; | %SVG.rect.qname; | %SVG.circle.qname;
| %SVG.line.qname; | %SVG.ellipse.qname; | %SVG.polyline.qname;
| %SVG.polygon.qname; %SVG.Shape.extra.class;"
>
<!-- module: svg-text.mod .............................. -->
<!ENTITY % SVG.Text.extra.class "" >
<!ENTITY % SVG.Text.class
"| %SVG.text.qname; | %SVG.altGlyphDef.qname; %SVG.Text.extra.class;"
>
<!ENTITY % SVG.TextContent.extra.class "" >
<!ENTITY % SVG.TextContent.class
"| %SVG.tspan.qname; | %SVG.tref.qname; | %SVG.textPath.qname;
| %SVG.altGlyph.qname; %SVG.TextContent.extra.class;"
>
<!-- module: svg-marker.mod ............................ -->
<!ENTITY % SVG.Marker.extra.class "" >
<!ENTITY % SVG.Marker.class
"| %SVG.marker.qname; %SVG.Marker.extra.class;"
>
<!-- module: svg-profile.mod ........................... -->
<!ENTITY % SVG.ColorProfile.extra.class "" >
<!ENTITY % SVG.ColorProfile.class
"| %SVG.color-profile.qname; %SVG.ColorProfile.extra.class;"
>
<!-- module: svg-gradient.mod .......................... -->
<!ENTITY % SVG.Gradient.extra.class "" >
<!ENTITY % SVG.Gradient.class
"| %SVG.linearGradient.qname; | %SVG.radialGradient.qname;
%SVG.Gradient.extra.class;"
>
<!-- module: svg-pattern.mod ........................... -->
<!ENTITY % SVG.Pattern.extra.class "" >
<!ENTITY % SVG.Pattern.class
"| %SVG.pattern.qname; %SVG.Pattern.extra.class;"
>
<!-- module: svg-clip.mod .............................. -->
<!ENTITY % SVG.Clip.extra.class "" >
<!ENTITY % SVG.Clip.class
"| %SVG.clipPath.qname; %SVG.Clip.extra.class;"
>
<!-- module: svg-mask.mod .............................. -->
<!ENTITY % SVG.Mask.extra.class "" >
<!ENTITY % SVG.Mask.class
"| %SVG.mask.qname; %SVG.Mask.extra.class;"
>
<!-- module: svg-filter.mod ............................ -->
<!ENTITY % SVG.Filter.extra.class "" >
<!ENTITY % SVG.Filter.class
"| %SVG.filter.qname; %SVG.Filter.extra.class;"
>
<!ENTITY % SVG.FilterPrimitive.extra.class "" >
<!ENTITY % SVG.FilterPrimitive.class
"| %SVG.feBlend.qname; | %SVG.feColorMatrix.qname;
| %SVG.feComponentTransfer.qname; | %SVG.feComposite.qname;
| %SVG.feConvolveMatrix.qname; | %SVG.feDiffuseLighting.qname;
| %SVG.feDisplacementMap.qname; | %SVG.feFlood.qname;
| %SVG.feGaussianBlur.qname; | %SVG.feImage.qname; | %SVG.feMerge.qname;
| %SVG.feMorphology.qname; | %SVG.feOffset.qname;
| %SVG.feSpecularLighting.qname; | %SVG.feTile.qname;
| %SVG.feTurbulence.qname; %SVG.FilterPrimitive.extra.class;"
>
<!-- module: svg-cursor.mod ............................ -->
<!ENTITY % SVG.Cursor.extra.class "" >
<!ENTITY % SVG.Cursor.class
"| %SVG.cursor.qname; %SVG.Cursor.extra.class;"
>
<!-- module: svg-hyperlink.mod ......................... -->
<!ENTITY % SVG.Hyperlink.extra.class "" >
<!ENTITY % SVG.Hyperlink.class
"| %SVG.a.qname; %SVG.Hyperlink.extra.class;"
>
<!-- module: svg-view.mod .............................. -->
<!ENTITY % SVG.View.extra.class "" >
<!ENTITY % SVG.View.class
"| %SVG.view.qname; %SVG.View.extra.class;"
>
<!-- module: svg-script.mod ............................ -->
<!ENTITY % SVG.Script.extra.class "" >
<!ENTITY % SVG.Script.class
"| %SVG.script.qname; %SVG.Script.extra.class;"
>
<!-- module: svg-animation.mod ......................... -->
<!ENTITY % SVG.Animation.extra.class "" >
<!ENTITY % SVG.Animation.class
"%SVG.animate.qname; | %SVG.set.qname; | %SVG.animateMotion.qname; |
%SVG.animateColor.qname; | %SVG.animateTransform.qname;
%SVG.Animation.extra.class;"
>
<!-- module: svg-font.mod .............................. -->
<!ENTITY % SVG.Font.extra.class "" >
<!ENTITY % SVG.Font.class
"| %SVG.font.qname; | %SVG.font-face.qname; %SVG.Font.extra.class;"
>
<!-- module: svg-extensibility.mod ..................... -->
<!ENTITY % SVG.Extensibility.extra.class "" >
<!ENTITY % SVG.Extensibility.class
"| %SVG.foreignObject.qname; %SVG.Extensibility.extra.class;"
>
<!-- end of svg11-model.mod -->
This section contains the attribute collection for SVG 1.1. attribute collection module and the SVG 1.1 DTD Driver work together to customize the module implementations to the document type's specific requirements.
<!-- ....................................................................... -->
<!-- SVG 1.1 Attribute Collection Module ................................... -->
<!-- file: svg11-attribs.mod
This is SVG, a language for describing two-dimensional graphics in XML.
Copyright 2001, 2002, 2011 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: single-page.html,v 1.2 2011/08/10 04:43:17 schepers Exp $
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ENTITIES SVG 1.1 Attribute Collection//EN"
SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-attribs.mod"
....................................................................... -->
<!-- SVG 1.1 Attribute Collection
This module defines the set of common attributes that can be present
on many SVG elements.
-->
<!-- module: svg-conditional.mod ....................... -->
<!ENTITY % ExtensionList.datatype "CDATA" >
<!ENTITY % FeatureList.datatype "CDATA" >
<!ENTITY % SVG.Conditional.extra.attrib "" >
<!ENTITY % SVG.Conditional.attrib
"requiredFeatures %FeatureList.datatype; #IMPLIED
requiredExtensions %ExtensionList.datatype; #IMPLIED
systemLanguage %LanguageCodes.datatype; #IMPLIED
%SVG.Conditional.extra.attrib;"
>
<!-- module: svg-style.mod ............................. -->
<!ENTITY % ClassList.datatype "CDATA" >
<!ENTITY % StyleSheet.datatype "CDATA" >
<!ENTITY % SVG.Style.extra.attrib "" >
<!ENTITY % SVG.Style.attrib
"style %StyleSheet.datatype; #IMPLIED
class %ClassList.datatype; #IMPLIED
%SVG.Style.extra.attrib;"
>
<!-- module: svg-text.mod .............................. -->
<!ENTITY % BaselineShiftValue.datatype "CDATA" >
<!ENTITY % FontFamilyValue.datatype "CDATA" >
<!ENTITY % FontSizeValue.datatype "CDATA" >
<!ENTITY % FontSizeAdjustValue.datatype "CDATA" >
<!ENTITY % GlyphOrientationHorizontalValue.datatype "CDATA" >
<!ENTITY % GlyphOrientationVerticalValue.datatype "CDATA" >
<!ENTITY % KerningValue.datatype "CDATA" >
<!ENTITY % SpacingValue.datatype "CDATA" >
<!ENTITY % TextDecorationValue.datatype "CDATA" >
<!ENTITY % SVG.Text.extra.attrib "" >
<!ENTITY % SVG.Text.attrib
"writing-mode ( lr-tb | rl-tb | tb-rl | lr | rl | tb | inherit ) #IMPLIED
%SVG.Text.extra.attrib;"
>
<!ENTITY % SVG.TextContent.extra.attrib "" >
<!ENTITY % SVG.TextContent.attrib
"alignment-baseline ( auto | baseline | before-edge | text-before-edge |
middle | central | after-edge | text-after-edge |
ideographic | alphabetic | hanging | mathematical |
inherit ) #IMPLIED
baseline-shift %BaselineShiftValue.datatype; #IMPLIED
direction ( ltr | rtl | inherit ) #IMPLIED
dominant-baseline ( auto | use-script | no-change | reset-size |
ideographic | alphabetic | hanging | mathematical |
central | middle | text-after-edge | text-before-edge |
inherit ) #IMPLIED
glyph-orientation-horizontal %GlyphOrientationHorizontalValue.datatype;
#IMPLIED
glyph-orientation-vertical %GlyphOrientationVerticalValue.datatype;
#IMPLIED
kerning %KerningValue.datatype; #IMPLIED
letter-spacing %SpacingValue.datatype; #IMPLIED
text-anchor ( start | middle | end | inherit ) #IMPLIED
text-decoration %TextDecorationValue.datatype; #IMPLIED
unicode-bidi ( normal | embed | bidi-override | inherit ) #IMPLIED
word-spacing %SpacingValue.datatype; #IMPLIED
%SVG.TextContent.extra.attrib;"
>
<!ENTITY % SVG.Font.extra.attrib "" >
<!ENTITY % SVG.Font.attrib
"font-family %FontFamilyValue.datatype; #IMPLIED
font-size %FontSizeValue.datatype; #IMPLIED
font-size-adjust %FontSizeAdjustValue.datatype; #IMPLIED
font-stretch ( normal | wider | narrower | ultra-condensed |
extra-condensed | condensed | semi-condensed |
semi-expanded | expanded | extra-expanded |
ultra-expanded | inherit ) #IMPLIED
font-style ( normal | italic | oblique | inherit ) #IMPLIED
font-variant ( normal | small-caps | inherit ) #IMPLIED
font-weight ( normal | bold | bolder | lighter | 100 | 200 | 300 | 400 |
500 | 600 | 700 | 800 | 900 | inherit ) #IMPLIED
%SVG.Font.extra.attrib;"
>
<!-- module: svg-marker.mod ............................ -->
<!ENTITY % MarkerValue.datatype "CDATA" >
<!ENTITY % SVG.Marker.extra.attrib "" >
<!ENTITY % SVG.Marker.attrib
"marker-start %MarkerValue.datatype; #IMPLIED
marker-mid %MarkerValue.datatype; #IMPLIED
marker-end %MarkerValue.datatype; #IMPLIED
%SVG.Marker.extra.attrib;"
>
<!-- module: svg-profile.mod ........................... -->
<!ENTITY % SVG.ColorProfile.extra.attrib "" >
<!ENTITY % SVG.ColorProfile.attrib
"color-profile CDATA #IMPLIED
%SVG.ColorProfile.extra.attrib;"
>
<!-- module: svg-gradient.mod .......................... -->
<!ENTITY % NumberOrPercentage.datatype "CDATA" >
<!ENTITY % SVG.Gradient.extra.attrib "" >
<!ENTITY % SVG.Gradient.attrib
"stop-color %SVGColor.datatype; #IMPLIED
stop-opacity %OpacityValue.datatype; #IMPLIED
%SVG.Gradient.extra.attrib;"
>
<!-- module: svg-clip.mod .............................. -->
<!ENTITY % ClipPathValue.datatype "CDATA" >
<!ENTITY % SVG.Clip.extra.attrib "" >
<!ENTITY % SVG.Clip.attrib
"clip-path %ClipPathValue.datatype; #IMPLIED
clip-rule %ClipFillRule.datatype; #IMPLIED
%SVG.Clip.extra.attrib;"
>
<!-- module: svg-mask.mod .............................. -->
<!ENTITY % MaskValue.datatype "CDATA" >
<!ENTITY % SVG.Mask.extra.attrib "" >
<!ENTITY % SVG.Mask.attrib
"mask %MaskValue.datatype; #IMPLIED
%SVG.Mask.extra.attrib;"
>
<!-- module: svg-filter.mod ............................ -->
<!ENTITY % FilterValue.datatype "CDATA" >
<!ENTITY % NumberOptionalNumber.datatype "CDATA" >
<!ENTITY % SVG.Filter.extra.attrib "" >
<!ENTITY % SVG.Filter.attrib
"filter %FilterValue.datatype; #IMPLIED
%SVG.Filter.extra.attrib;"
>
<!ENTITY % SVG.FilterColor.extra.attrib "" >
<!ENTITY % SVG.FilterColor.attrib
"color-interpolation-filters ( auto | sRGB | linearRGB | inherit )
#IMPLIED
%SVG.FilterColor.extra.attrib;"
>
<!-- module: svg-cursor.mod ............................ -->
<!ENTITY % CursorValue.datatype "CDATA" >
<!ENTITY % SVG.Cursor.extra.attrib "" >
<!ENTITY % SVG.Cursor.attrib
"cursor %CursorValue.datatype; #IMPLIED
%SVG.Cursor.extra.attrib;"
>
<!-- end of svg11-attribs.mod -->
This appendix is normative.
This appendix provides an introduction to the SVG DOM and discusses the relationship of the SVG DOM with the Document Object Model (DOM) Level 2 Core Specification [DOM2]. specific SVG DOM interfaces that correspond to particular sections of the SVG specification are defined at the end of corresponding chapters in this specification, as follows:
SVG DOM builds upon and is compatible with DOM Level 2. In particular:
A DOM application can use the hasFeature method of the DOMImplementation interface to verify that the interfaces listed in this section are supported. list of available interfaces is provided in section Feature strings for the hasFeature method call.
All SVG DOM objects that directly correspond to an attribute, e.g. the SVGAnimatedLength ry in an SVGRectElement, are live. This means that any changes made to the attribute are immediately reflected in the corresponding SVG DOM object.
SVG DOM allows attributes to be accessed even though they haven't been specified explicitly in the document markup. When this happens an appropriate об’єкт created, initialized and returned. This newly constructed object does not affect rendering until it is modified for the first time. After the first modification the object becomes live, such that any modifications made to the corresponding attribute are immediately reflected in the object.
For example, if rectElement.x.baseVal is accessed and
the ‘x’
attribute was not specified in the document, the returned SVG DOM object
would represent the value 0 user units.
For cases where an attribute has a default value the returned SVG DOM object that must reflect that value, and for all other cases the об’єкт initialized as described below. Якщо a particular SVG DOM interface is not listed below that means that the object initialization shall be done using the values for the objects that the interface contains, e.g DOMString in the case of SVGAnimatedString, or four floats in the case of SVGRect.
Every Element object that corresponds to an SVG element (that is, an element with namespace URI "http://www.w3.org/2000/svg" and a local name that is one елементуs defined in this specification) must also implement the DOM interface identified in element definition. For example, in ‘rect’ element, the SVGRectElement interface is identified. This means that every Element object whose namespace URI is "http://www.w3.org/2000/svg" and whose local name is "rect" must also implement SVGRectElement.
SVG DOM follows similar naming conventions to the Document Object Model HTML ([DOM1], chapter 2).
All names are defined as one or more English words concatenated together to form a single string. Property or method names start with the initial keyword in lowercase, and each subsequent word starts with a capital letter. For example, a property that returns document meta information such as the date the file was created might be named "fileDateCreated". In the ECMAScript binding, properties are exposed as properties of a given object. In Java, properties are exposed with get and set methods.
For attributes with the CDATA data type, the case of the return value is that given in the source document.
exception SVGException {
unsigned short code;
};
// SVGException code
const unsigned short SVG_WRONG_TYPE_ERR = 0;
const unsigned short SVG_INVALID_VALUE_ERR = 1;
const unsigned short SVG_MATRIX_NOT_INVERTABLE = 2;
Raised when an object of the wrong type is passed to an operation.
Note that no operation is defined to raise an SVGException with this code in SVG 1.1 Second Edition. constant remains defined here for consistency with SVG 1.1 First Edition.
Raised when an attempt is made to invert a matrix that is not invertible.
Note the unusual spelling of this constant, which is necessary for compatibility with existing content.
feature strings that are available for the hasFeature method call that is part of the SVG DOM's support for the DOMImplementation interface defined in DOM Level 2 Core [DOM2] are the same features strings available for the ‘requiredFeatures’ attribute that is available for many SVG elements.
For all features that correspond to the SVG language and are documented in this specification (дивіться appendix Feature Strings for a list of features in the SVG language), the version number for the hasFeature method call is "1.1". For features that correspond to other languages, refer to the relevant other specifications to determine the appropriate version number for the given feature.
SVG DOM supports all of the interfaces defined in, and the following event types from, DOM Level 2 Events [DOM2EVENTS]:
While event listeners can be registered
using an addEventListener call on any element in the DOM,
the use of event attributes on
elements where those attributes are disallowed will not result in their
being invoked if the relevant event is dispatched to the element. For
example, if the ‘onclick’
attribute were specified on a ‘title’
element, its contents would never be run in response to a click
event:
<svg xmlns="http://www.w3.org/2000/svg">
<title onclick="alert('Hello')">Invalid event attribute</title>
<script>
// Find the 'title' element.
var title = document.getElementsByTagNameNS("http://www.w3.org/2000/svg", "title")[0];
// Create and initialize a 'click' event.
var event = document.createEvent("MouseEvent");
event.initMouseEvent("click", true, false, this, 1, 0, 0, 0, 0, false,
false, false, false, 0, null);
// Dispatch the event to the 'title' element. Since onclick="" is not
// allowed on 'title', the alert will not show.
title.dispatchEvent(event);
</script>
</svg>
Дивіться the Attribute Index for details on which elements a given event attribute is allowed to be specified on.
Implementors may view the setting of event attributes as the creation
and registration of an EventListener on the EventTarget. Such event listeners are invoked
only for the "bubbling" and "at target" phases, as if false were
specified for the useCapture argument to addEventListener.
This EventListener behaves in the same manner as
any other which may be registered on the EventTarget.
Якщо the attribute representing the event listener is changed, this may be viewed as the removal of the previously registered EventListener and the registration of a new one. Futhermore, no specification is made as to the order in which event attributes will receive the event with regards to the other EventListeners on the EventTarget.
In Java, one way that event listeners can be established is to define a class which implements the EventListener interface, such as:
class MyAction1 implements EventListener {
public void handleEvent(Event evt) {
// process the event
}
}
// ... later ...
MyAction1 mc1 = new MyAction1();
myElement.addEventListener("DOMActivate", mc1, false);
In ECMAScript, one way to establish an event listener is to define a
function and pass that function to the addEventListener
method:
function myAction1(evt) {
// process the event
}
// ... later ...
myElement.addEventListener("DOMActivate", myAction1, false)
In ECMAScript, the character data content of an event attribute becomes the definition of the ECMAScript function which gets invoked in response to the event. As with all registered ECMAScript event listener functions, this function receives an Event object as a parameter, and the name of the Event об’єкт evt. For example, it is possible to write:
<rect onactivate="MyActivateHandler(evt)" .../>
which will pass the Event object evt into
function MyActivateHandler.
section описує the facilities from DOM Level 2 CSS ([DOM2STYLE], chapter 2) that are part of the SVG DOM.
користувацькі агенти that do not support styling with CSS are only required to support the following interfaces from DOM Level 2 CSS ([DOM2STYLE], chapter 2), along with any interfaces necessary to implement the interfaces, such as CSSPrimitiveValue and CSSValueList. These interfaces are used in conjunction with the getPresentationAttribute method call on Інтерфейс SVGStylable, which must be supported on all implementations of the SVG DOM.
користувацькі агенти that support Styling with CSS, the SVG DOM, and aural styling ([CSS2], chapter 19) must support all of the interfaces defined in DOM Level 2 CSS ([DOM2STYLE], chapter 2) which apply to aural properties.
For visual media ([CSS2], section 7.3.1), користувацькі агенти must support all of the required interfaces defined in DOM Level 2 CSS. All of the interfaces that are optional for DOM Level 2 CSS are also optional for користувацькі агенти implementing the SVG DOM.
Note: the getPresentationAttribute method and the interfaces that extend CSSValue are deprecated, and may be dropped from future versions of the SVG specification.
Whether or not a користувацький агент supports styling with CSS, a користувацький агент still must support interface CSSValue, as this is the type that is returned from the getPresentationAttribute method call on Інтерфейс SVGStylable.
DOM Level 2 CSS defines a set of extended interfaces ([DOM2STYLE], section 2.3) for use in conjunction with interface CSSValue. table below specifies the type of CSSValue used to represent each SVG property that applies to visual media ([CSS2], section 7.3.1). expectation is that the CSSValue returned from the getPropertyCSSValue method on the CSSStyleDeclaration interface or the getPresentationAttribute method on the SVGStylable interface can be cast down, using binding-specific casting methods, to the specific derived interface.
For properties that are represented by a custom interface (the cssValueType of the CSSValue is CSS_CUSTOM), the name of the derived interface is specified in the table. For these properties, the table below indicates which extended interfaces are mandatory and which are not.
For properties that consist of lists of values (the cssValueType of the CSSValue is CSS_VALUE_LIST), the derived interface is CSSValueList. For all other properties (the cssValueType of the CSSValue is CSS_PRIMITIVE_VALUE), the derived interface is CSSPrimitiveValue.
For shorthand properties, a CSSValue always will have a значення null. Shorthand property values can only be accessed and modified as strings.
SVG DOM defines the following SVG-specific custom property interfaces, all of which are mandatory for SVG користувацькі агенти:
Some operations and attributes in the SVG DOM are defined to raise an
exception when an attempt is made to modify a node in the DOM that is
тільки для читання. Such read only nodes are not related to attributes
declared in IDL with the readonly keyword. Rather, they
are nodes that cannot be modified by virtue of being defined as readonly
nodes by DOM
Level 2 Core ([DOM2], Glossary
appendix). Specifically, Entity
and EntityReference
nodes and their descendants are read only ([DOM2],
section 1.3).
Якщо a script sets a DOM attribute to an invalid value (тобто, a negative number for an attribute that requires a non-negative number or an out-of-range value for an enumeration), unless this specification indicates otherwise, no exception shall be raised on setting, but the given фрагмент документу shall become technically in error as described in Обробка помилок.
This appendix is normative.
This appendix contains the complete OMG IDL for the SVG Document Object Model definitions. IDL is also available at:
http://www.w3.org/TR/2011/REC-SVG11-20110816/svg.idl
SVG IDL defines the model for the SVG DOM. Note that the SVG IDL is defined such that some interfaces have more than one base class. different standard language bindings for the SVG DOM are responsible for defining how to map all aspects of the SVG DOM into the given language, including how the language should implement interfaces with more than one base class.
module smil {
interface ElementTimeControl {
void beginElement();
void beginElementAt(in float offset);
void endElement();
void endElementAt(in float offset);
};
interface TimeEvent : Event {
readonly attribute AbstractView view;
readonly attribute long detail;
void initTimeEvent(in DOMString typeArg, in AbstractView viewArg, in long detailArg);
};
};
module svg {
exception SVGException {
unsigned short code;
};
// SVGException code
const unsigned short SVG_WRONG_TYPE_ERR = 0;
const unsigned short SVG_INVALID_VALUE_ERR = 1;
const unsigned short SVG_MATRIX_NOT_INVERTABLE = 2;
Інтерфейс SVGElement : Element {
attribute DOMString id setraises(DOMException);
attribute DOMString xmlbase setraises(DOMException);
readonly attribute SVGElement ownerSVGElement;
readonly attribute SVGElement viewportElement;
};
Інтерфейс SVGAnimatedBoolean {
attribute boolean baseVal setraises(DOMException);
readonly attribute boolean animVal;
};
Інтерфейс SVGAnimatedString {
attribute DOMString baseVal setraises(DOMException);
readonly attribute DOMString animVal;
};
Інтерфейс SVGStringList {
readonly attribute unsigned long numberOfItems;
void clear() raises(DOMException);
DOMString initialize(in DOMString newItem) raises(DOMException);
DOMString getItem(in unsigned long index) raises(DOMException);
DOMString insertItemBefore(in DOMString newItem, in unsigned long index) raises(DOMException);
DOMString replaceItem(in DOMString newItem, in unsigned long index) raises(DOMException);
DOMString removeItem(in unsigned long index) raises(DOMException);
DOMString appendItem(in DOMString newItem) raises(DOMException);
};
Інтерфейс SVGAnimatedEnumeration {
attribute unsigned short baseVal setraises(DOMException);
readonly attribute unsigned short animVal;
};
Інтерфейс SVGAnimatedInteger {
attribute long baseVal setraises(DOMException);
readonly attribute long animVal;
};
Інтерфейс SVGNumber {
attribute float value setraises(DOMException);
};
Інтерфейс SVGAnimatedNumber {
attribute float baseVal setraises(DOMException);
readonly attribute float animVal;
};
Інтерфейс SVGNumberList {
readonly attribute unsigned long numberOfItems;
void clear() raises(DOMException);
SVGNumber initialize(in SVGNumber newItem) raises(DOMException);
SVGNumber getItem(in unsigned long index) raises(DOMException);
SVGNumber insertItemBefore(in SVGNumber newItem, in unsigned long index) raises(DOMException);
SVGNumber replaceItem(in SVGNumber newItem, in unsigned long index) raises(DOMException);
SVGNumber removeItem(in unsigned long index) raises(DOMException);
SVGNumber appendItem(in SVGNumber newItem) raises(DOMException);
};
Інтерфейс SVGAnimatedNumberList {
readonly attribute SVGNumberList baseVal;
readonly attribute SVGNumberList animVal;
};
Інтерфейс SVGLength {
// Length Unit Types
const unsigned short SVG_LENGTHTYPE_UNKNOWN = 0;
const unsigned short SVG_LENGTHTYPE_NUMBER = 1;
const unsigned short SVG_LENGTHTYPE_PERCENTAGE = 2;
const unsigned short SVG_LENGTHTYPE_EMS = 3;
const unsigned short SVG_LENGTHTYPE_EXS = 4;
const unsigned short SVG_LENGTHTYPE_PX = 5;
const unsigned short SVG_LENGTHTYPE_CM = 6;
const unsigned short SVG_LENGTHTYPE_MM = 7;
const unsigned short SVG_LENGTHTYPE_IN = 8;
const unsigned short SVG_LENGTHTYPE_PT = 9;
const unsigned short SVG_LENGTHTYPE_PC = 10;
readonly attribute unsigned short unitType;
attribute float value setraises(DOMException);
attribute float valueInSpecifiedUnits setraises(DOMException);
attribute DOMString valueAsString setraises(DOMException);
void newValueSpecifiedUnits(in unsigned short unitType, in float valueInSpecifiedUnits) raises(DOMException);
void convertToSpecifiedUnits(in unsigned short unitType) raises(DOMException);
};
Інтерфейс SVGAnimatedLength {
readonly attribute SVGLength baseVal;
readonly attribute SVGLength animVal;
};
Інтерфейс SVGLengthList {
readonly attribute unsigned long numberOfItems;
void clear() raises(DOMException);
SVGLength initialize(in SVGLength newItem) raises(DOMException);
SVGLength getItem(in unsigned long index) raises(DOMException);
SVGLength insertItemBefore(in SVGLength newItem, in unsigned long index) raises(DOMException);
SVGLength replaceItem(in SVGLength newItem, in unsigned long index) raises(DOMException);
SVGLength removeItem(in unsigned long index) raises(DOMException);
SVGLength appendItem(in SVGLength newItem) raises(DOMException);
};
Інтерфейс SVGAnimatedLengthList {
readonly attribute SVGLengthList baseVal;
readonly attribute SVGLengthList animVal;
};
Інтерфейс SVGAngle {
// Angle Unit Types
const unsigned short SVG_ANGLETYPE_UNKNOWN = 0;
const unsigned short SVG_ANGLETYPE_UNSPECIFIED = 1;
const unsigned short SVG_ANGLETYPE_DEG = 2;
const unsigned short SVG_ANGLETYPE_RAD = 3;
const unsigned short SVG_ANGLETYPE_GRAD = 4;
readonly attribute unsigned short unitType;
attribute float value setraises(DOMException);
attribute float valueInSpecifiedUnits setraises(DOMException);
attribute DOMString valueAsString setraises(DOMException);
void newValueSpecifiedUnits(in unsigned short unitType, in float valueInSpecifiedUnits) raises(DOMException);
void convertToSpecifiedUnits(in unsigned short unitType) raises(DOMException);
};
Інтерфейс SVGAnimatedAngle {
readonly attribute SVGAngle baseVal;
readonly attribute SVGAngle animVal;
};
Інтерфейс SVGColor : CSSValue {
// Color Types
const unsigned short SVG_COLORTYPE_UNKNOWN = 0;
const unsigned short SVG_COLORTYPE_RGBCOLOR = 1;
const unsigned short SVG_COLORTYPE_RGBCOLOR_ICCCOLOR = 2;
const unsigned short SVG_COLORTYPE_CURRENTCOLOR = 3;
readonly attribute unsigned short colorType;
readonly attribute RGBColor rgbColor;
readonly attribute SVGICCColor iccColor;
void setRGBColor(in DOMString rgbColor) raises(SVGException);
void setRGBColorICCColor(in DOMString rgbColor, in DOMString iccColor) raises(SVGException);
void setColor(in unsigned short colorType, in DOMString rgbColor, in DOMString iccColor) raises(SVGException);
};
Інтерфейс SVGICCColor {
attribute DOMString colorProfile setraises(DOMException);
readonly attribute SVGNumberList colors;
};
Інтерфейс SVGRect {
attribute float x setraises(DOMException);
attribute float y setraises(DOMException);
attribute float width setraises(DOMException);
attribute float height setraises(DOMException);
};
Інтерфейс SVGAnimatedRect {
readonly attribute SVGRect baseVal;
readonly attribute SVGRect animVal;
};
Інтерфейс SVGUnitTypes {
// Unit Types
const unsigned short SVG_UNIT_TYPE_UNKNOWN = 0;
const unsigned short SVG_UNIT_TYPE_USERSPACEONUSE = 1;
const unsigned short SVG_UNIT_TYPE_OBJECTBOUNDINGBOX = 2;
};
Інтерфейс SVGStylable {
readonly attribute SVGAnimatedString className;
readonly attribute CSSStyleDeclaration style;
CSSValue getPresentationAttribute(in DOMString name);
};
Інтерфейс SVGLocatable {
readonly attribute SVGElement nearestViewportElement;
readonly attribute SVGElement farthestViewportElement;
SVGRect getBBox();
SVGMatrix getCTM();
SVGMatrix getScreenCTM();
SVGMatrix getTransformToElement(in SVGElement element) raises(SVGException);
};
Інтерфейс SVGTransformable : SVGLocatable {
readonly attribute SVGAnimatedTransformList transform;
};
Інтерфейс SVGTests {
readonly attribute SVGStringList requiredFeatures;
readonly attribute SVGStringList requiredExtensions;
readonly attribute SVGStringList systemLanguage;
boolean hasExtension(in DOMString extension);
};
Інтерфейс SVGLangSpace {
attribute DOMString xmllang setraises(DOMException);
attribute DOMString xmlspace setraises(DOMException);
};
Інтерфейс SVGExternalResourcesRequired {
readonly attribute SVGAnimatedBoolean externalResourcesRequired;
};
Інтерфейс SVGFitToViewBox {
readonly attribute SVGAnimatedRect viewBox;
readonly attribute SVGAnimatedPreserveAspectRatio preserveAspectRatio;
};
Інтерфейс SVGZoomAndPan {
// Zoom and Pan Types
const unsigned short SVG_ZOOMANDPAN_UNKNOWN = 0;
const unsigned short SVG_ZOOMANDPAN_DISABLE = 1;
const unsigned short SVG_ZOOMANDPAN_MAGNIFY = 2;
attribute unsigned short zoomAndPan setraises(DOMException);
};
Інтерфейс SVGViewSpec : SVGZoomAndPan,
SVGFitToViewBox {
readonly attribute SVGTransformList transform;
readonly attribute SVGElement viewTarget;
readonly attribute DOMString viewBoxString;
readonly attribute DOMString preserveAspectRatioString;
readonly attribute DOMString transformString;
readonly attribute DOMString viewTargetString;
};
Інтерфейс SVGURIReference {
readonly attribute SVGAnimatedString href;
};
Інтерфейс SVGCSSRule : CSSRule {
const unsigned short COLOR_PROFILE_RULE = 7;
};
Інтерфейс SVGRenderingIntent {
// Rendering Intent Types
const unsigned short RENDERING_INTENT_UNKNOWN = 0;
const unsigned short RENDERING_INTENT_AUTO = 1;
const unsigned short RENDERING_INTENT_PERCEPTUAL = 2;
const unsigned short RENDERING_INTENT_RELATIVE_COLORIMETRIC = 3;
const unsigned short RENDERING_INTENT_SATURATION = 4;
const unsigned short RENDERING_INTENT_ABSOLUTE_COLORIMETRIC = 5;
};
Інтерфейс SVGDocument : Document,
DocumentEvent {
readonly attribute DOMString title;
readonly attribute DOMString referrer;
readonly attribute DOMString domain;
readonly attribute DOMString URL;
readonly attribute SVGElement rootElement;
};
Інтерфейс SVGElement : SVGElement,
SVGTests,
SVGLangSpace,
SVGExternalResourcesRequired,
SVGStylable,
SVGLocatable,
SVGFitToViewBox,
SVGZoomAndPan,
DocumentEvent,
ViewCSS,
DocumentCSS {
readonly attribute SVGAnimatedLength x;
readonly attribute SVGAnimatedLength y;
readonly attribute SVGAnimatedLength width;
readonly attribute SVGAnimatedLength height;
attribute DOMString contentScriptType setraises(DOMException);
attribute DOMString contentStyleType setraises(DOMException);
readonly attribute SVGRect viewport;
readonly attribute float pixelUnitToMillimeterX;
readonly attribute float pixelUnitToMillimeterY;
readonly attribute float screenPixelToMillimeterX;
readonly attribute float screenPixelToMillimeterY;
readonly attribute boolean useCurrentView;
readonly attribute SVGViewSpec currentView;
attribute float currentScale;
readonly attribute SVGPoint currentTranslate;
unsigned long suspendRedraw(in unsigned long maxWaitMilliseconds);
void unsuspendRedraw(in unsigned long suspendHandleID);
void unsuspendRedrawAll();
void forceRedraw();
void pauseAnimations();
void unpauseAnimations();
boolean animationsPaused();
float getCurrentTime();
void setCurrentTime(in float seconds);
NodeList getIntersectionList(in SVGRect rect, in SVGElement referenceElement);
NodeList getEnclosureList(in SVGRect rect, in SVGElement referenceElement);
boolean checkIntersection(in SVGElement element, in SVGRect rect);
boolean checkEnclosure(in SVGElement element, in SVGRect rect);
void deselectAll();
SVGNumber createSVGNumber();
SVGLength createSVGLength();
SVGAngle createSVGAngle();
SVGPoint createSVGPoint();
SVGMatrix createSVGMatrix();
SVGRect createSVGRect();
SVGTransform createSVGTransform();
SVGTransform createSVGTransformFromMatrix(in SVGMatrix matrix);
Element getElementById(in DOMString elementId);
};
Інтерфейс SVGGElement : SVGElement,
SVGTests,
SVGLangSpace,
SVGExternalResourcesRequired,
SVGStylable,
SVGTransformable {
};
Інтерфейс SVGDefsElement : SVGElement,
SVGTests,
SVGLangSpace,
SVGExternalResourcesRequired,
SVGStylable,
SVGTransformable {
};
Інтерфейс SVGDescElement : SVGElement,
SVGLangSpace,
SVGStylable {
};
Інтерфейс SVGTitleElement : SVGElement,
SVGLangSpace,
SVGStylable {
};
Інтерфейс SVGSymbolElement : SVGElement,
SVGLangSpace,
SVGExternalResourcesRequired,
SVGStylable,
SVGFitToViewBox {
};
Інтерфейс SVGUseElement : SVGElement,
SVGURIReference,
SVGTests,
SVGLangSpace,
SVGExternalResourcesRequired,
SVGStylable,
SVGTransformable {
readonly attribute SVGAnimatedLength x;
readonly attribute SVGAnimatedLength y;
readonly attribute SVGAnimatedLength width;
readonly attribute SVGAnimatedLength height;
readonly attribute SVGElementInstance instanceRoot;
readonly attribute SVGElementInstance animatedInstanceRoot;
};
Інтерфейс SVGElementInstance : EventTarget {
readonly attribute SVGElement correspondingElement;
readonly attribute SVGUseElement correspondingUseElement;
readonly attribute SVGElementInstance parentNode;
readonly attribute SVGElementInstanceList childNodes;
readonly attribute SVGElementInstance firstChild;
readonly attribute SVGElementInstance lastChild;
readonly attribute SVGElementInstance previousSibling;
readonly attribute SVGElementInstance nextSibling;
};
Інтерфейс SVGElementInstanceList {
readonly attribute unsigned long length;
SVGElementInstance item(in unsigned long index);
};
Інтерфейс SVGImageElement : SVGElement,
SVGURIReference,
SVGTests,
SVGLangSpace,
SVGExternalResourcesRequired,
SVGStylable,
SVGTransformable {
readonly attribute SVGAnimatedLength x;
readonly attribute SVGAnimatedLength y;
readonly attribute SVGAnimatedLength width;
readonly attribute SVGAnimatedLength height;
readonly attribute SVGAnimatedPreserveAspectRatio preserveAspectRatio;
};
Інтерфейс SVGSwitchElement : SVGElement,
SVGTests,
SVGLangSpace,
SVGExternalResourcesRequired,
SVGStylable,
SVGTransformable {
};
interface GetSVGDocument {
SVGDocument getSVGDocument();
};
Інтерфейс SVGStyleElement : SVGElement,
SVGLangSpace {
attribute DOMString type setraises(DOMException);
attribute DOMString media setraises(DOMException);
attribute DOMString title setraises(DOMException);
};
Інтерфейс SVGPoint {
attribute float x setraises(DOMException);
attribute float y setraises(DOMException);
SVGPoint matrixTransform(in SVGMatrix matrix);
};
Інтерфейс SVGPointList {
readonly attribute unsigned long numberOfItems;
void clear() raises(DOMException);
SVGPoint initialize(in SVGPoint newItem) raises(DOMException);
SVGPoint getItem(in unsigned long index) raises(DOMException);
SVGPoint insertItemBefore(in SVGPoint newItem, in unsigned long index) raises(DOMException);
SVGPoint replaceItem(in SVGPoint newItem, in unsigned long index) raises(DOMException);
SVGPoint removeItem(in unsigned long index) raises(DOMException);
SVGPoint appendItem(in SVGPoint newItem) raises(DOMException);
};
Інтерфейс SVGMatrix {
attribute float a setraises(DOMException);
attribute float b setraises(DOMException);
attribute float c setraises(DOMException);
attribute float d setraises(DOMException);
attribute float e setraises(DOMException);
attribute float f setraises(DOMException);
SVGMatrix multiply(in SVGMatrix secondMatrix);
SVGMatrix inverse() raises(SVGException);
SVGMatrix translate(in float x, in float y);
SVGMatrix scale(in float scaleFactor);
SVGMatrix scaleNonUniform(in float scaleFactorX, in float scaleFactorY);
SVGMatrix rotate(in float angle);
SVGMatrix rotateFromVector(in float x, in float y) raises(SVGException);
SVGMatrix flipX();
SVGMatrix flipY();
SVGMatrix skewX(in float angle);
SVGMatrix skewY(in float angle);
};
Інтерфейс SVGTransform {
// Transform Types
const unsigned short SVG_TRANSFORM_UNKNOWN = 0;
const unsigned short SVG_TRANSFORM_MATRIX = 1;
const unsigned short SVG_TRANSFORM_TRANSLATE = 2;
const unsigned short SVG_TRANSFORM_SCALE = 3;
const unsigned short SVG_TRANSFORM_ROTATE = 4;
const unsigned short SVG_TRANSFORM_SKEWX = 5;
const unsigned short SVG_TRANSFORM_SKEWY = 6;
readonly attribute unsigned short type;
readonly attribute SVGMatrix matrix;
readonly attribute float angle;
void setMatrix(in SVGMatrix matrix) raises(DOMException);
void setTranslate(in float tx, in float ty) raises(DOMException);
void setScale(in float sx, in float sy) raises(DOMException);
void setRotate(in float angle, in float cx, in float cy) raises(DOMException);
void setSkewX(in float angle) raises(DOMException);
void setSkewY(in float angle) raises(DOMException);
};
Інтерфейс SVGTransformList {
readonly attribute unsigned long numberOfItems;
void clear() raises(DOMException);
SVGTransform initialize(in SVGTransform newItem) raises(DOMException);
SVGTransform getItem(in unsigned long index) raises(DOMException);
SVGTransform insertItemBefore(in SVGTransform newItem, in unsigned long index) raises(DOMException);
SVGTransform replaceItem(in SVGTransform newItem, in unsigned long index) raises(DOMException);
SVGTransform removeItem(in unsigned long index) raises(DOMException);
SVGTransform appendItem(in SVGTransform newItem) raises(DOMException);
SVGTransform createSVGTransformFromMatrix(in SVGMatrix matrix);
SVGTransform consolidate() raises(DOMException);
};
Інтерфейс SVGAnimatedTransformList {
readonly attribute SVGTransformList baseVal;
readonly attribute SVGTransformList animVal;
};
Інтерфейс SVGPreserveAspectRatio {
// Alignment Types
const unsigned short SVG_PRESERVEASPECTRATIO_UNKNOWN = 0;
const unsigned short SVG_PRESERVEASPECTRATIO_NONE = 1;
const unsigned short SVG_PRESERVEASPECTRATIO_XMINYMIN = 2;
const unsigned short SVG_PRESERVEASPECTRATIO_XMIDYMIN = 3;
const unsigned short SVG_PRESERVEASPECTRATIO_XMAXYMIN = 4;
const unsigned short SVG_PRESERVEASPECTRATIO_XMINYMID = 5;
const unsigned short SVG_PRESERVEASPECTRATIO_XMIDYMID = 6;
const unsigned short SVG_PRESERVEASPECTRATIO_XMAXYMID = 7;
const unsigned short SVG_PRESERVEASPECTRATIO_XMINYMAX = 8;
const unsigned short SVG_PRESERVEASPECTRATIO_XMIDYMAX = 9;
const unsigned short SVG_PRESERVEASPECTRATIO_XMAXYMAX = 10;
// Meet-or-slice Types
const unsigned short SVG_MEETORSLICE_UNKNOWN = 0;
const unsigned short SVG_MEETORSLICE_MEET = 1;
const unsigned short SVG_MEETORSLICE_SLICE = 2;
attribute unsigned short align setraises(DOMException);
attribute unsigned short meetOrSlice setraises(DOMException);
};
Інтерфейс SVGAnimatedPreserveAspectRatio {
readonly attribute SVGPreserveAspectRatio baseVal;
readonly attribute SVGPreserveAspectRatio animVal;
};
Інтерфейс SVGPathSeg {
// Path Segment Types
const unsigned short PATHSEG_UNKNOWN = 0;
const unsigned short PATHSEG_CLOSEPATH = 1;
const unsigned short PATHSEG_MOVETO_ABS = 2;
const unsigned short PATHSEG_MOVETO_REL = 3;
const unsigned short PATHSEG_LINETO_ABS = 4;
const unsigned short PATHSEG_LINETO_REL = 5;
const unsigned short PATHSEG_CURVETO_CUBIC_ABS = 6;
const unsigned short PATHSEG_CURVETO_CUBIC_REL = 7;
const unsigned short PATHSEG_CURVETO_QUADRATIC_ABS = 8;
const unsigned short PATHSEG_CURVETO_QUADRATIC_REL = 9;
const unsigned short PATHSEG_ARC_ABS = 10;
const unsigned short PATHSEG_ARC_REL = 11;
const unsigned short PATHSEG_LINETO_HORIZONTAL_ABS = 12;
const unsigned short PATHSEG_LINETO_HORIZONTAL_REL = 13;
const unsigned short PATHSEG_LINETO_VERTICAL_ABS = 14;
const unsigned short PATHSEG_LINETO_VERTICAL_REL = 15;
const unsigned short PATHSEG_CURVETO_CUBIC_SMOOTH_ABS = 16;
const unsigned short PATHSEG_CURVETO_CUBIC_SMOOTH_REL = 17;
const unsigned short PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS = 18;
const unsigned short PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL = 19;
readonly attribute unsigned short pathSegType;
readonly attribute DOMString pathSegTypeAsLetter;
};
Інтерфейс SVGPathSegClosePath : SVGPathSeg {
};
Інтерфейс SVGPathSegMovetoAbs : SVGPathSeg {
attribute float x setraises(DOMException);
attribute float y setraises(DOMException);
};
Інтерфейс SVGPathSegMovetoRel : SVGPathSeg {
attribute float x setraises(DOMException);
attribute float y setraises(DOMException);
};
Інтерфейс SVGPathSegLinetoAbs : SVGPathSeg {
attribute float x setraises(DOMException);
attribute float y setraises(DOMException);
};
Інтерфейс SVGPathSegLinetoRel : SVGPathSeg {
attribute float x setraises(DOMException);
attribute float y setraises(DOMException);
};
Інтерфейс SVGPathSegCurvetoCubicAbs : SVGPathSeg {
attribute float x setraises(DOMException);
attribute float y setraises(DOMException);
attribute float x1 setraises(DOMException);
attribute float y1 setraises(DOMException);
attribute float x2 setraises(DOMException);
attribute float y2 setraises(DOMException);
};
Інтерфейс SVGPathSegCurvetoCubicRel : SVGPathSeg {
attribute float x setraises(DOMException);
attribute float y setraises(DOMException);
attribute float x1 setraises(DOMException);
attribute float y1 setraises(DOMException);
attribute float x2 setraises(DOMException);
attribute float y2 setraises(DOMException);
};
Інтерфейс SVGPathSegCurvetoQuadraticAbs : SVGPathSeg {
attribute float x setraises(DOMException);
attribute float y setraises(DOMException);
attribute float x1 setraises(DOMException);
attribute float y1 setraises(DOMException);
};
Інтерфейс SVGPathSegCurvetoQuadraticRel : SVGPathSeg {
attribute float x setraises(DOMException);
attribute float y setraises(DOMException);
attribute float x1 setraises(DOMException);
attribute float y1 setraises(DOMException);
};
Інтерфейс SVGPathSegArcAbs : SVGPathSeg {
attribute float x setraises(DOMException);
attribute float y setraises(DOMException);
attribute float r1 setraises(DOMException);
attribute float r2 setraises(DOMException);
attribute float angle setraises(DOMException);
attribute boolean largeArcFlag setraises(DOMException);
attribute boolean sweepFlag setraises(DOMException);
};
Інтерфейс SVGPathSegArcRel : SVGPathSeg {
attribute float x setraises(DOMException);
attribute float y setraises(DOMException);
attribute float r1 setraises(DOMException);
attribute float r2 setraises(DOMException);
attribute float angle setraises(DOMException);
attribute boolean largeArcFlag setraises(DOMException);
attribute boolean sweepFlag setraises(DOMException);
};
Інтерфейс SVGPathSegLinetoHorizontalAbs : SVGPathSeg {
attribute float x setraises(DOMException);
};
Інтерфейс SVGPathSegLinetoHorizontalRel : SVGPathSeg {
attribute float x setraises(DOMException);
};
Інтерфейс SVGPathSegLinetoVerticalAbs : SVGPathSeg {
attribute float y setraises(DOMException);
};
Інтерфейс SVGPathSegLinetoVerticalRel : SVGPathSeg {
attribute float y setraises(DOMException);
};
Інтерфейс SVGPathSegCurvetoCubicSmoothAbs : SVGPathSeg {
attribute float x setraises(DOMException);
attribute float y setraises(DOMException);
attribute float x2 setraises(DOMException);
attribute float y2 setraises(DOMException);
};
Інтерфейс SVGPathSegCurvetoCubicSmoothRel : SVGPathSeg {
attribute float x setraises(DOMException);
attribute float y setraises(DOMException);
attribute float x2 setraises(DOMException);
attribute float y2 setraises(DOMException);
};
Інтерфейс SVGPathSegCurvetoQuadraticSmoothAbs : SVGPathSeg {
attribute float x setraises(DOMException);
attribute float y setraises(DOMException);
};
Інтерфейс SVGPathSegCurvetoQuadraticSmoothRel : SVGPathSeg {
attribute float x setraises(DOMException);
attribute float y setraises(DOMException);
};
Інтерфейс SVGPathSegList {
readonly attribute unsigned long numberOfItems;
void clear() raises(DOMException);
SVGPathSeg initialize(in SVGPathSeg newItem) raises(DOMException);
SVGPathSeg getItem(in unsigned long index) raises(DOMException);
SVGPathSeg insertItemBefore(in SVGPathSeg newItem, in unsigned long index) raises(DOMException);
SVGPathSeg replaceItem(in SVGPathSeg newItem, in unsigned long index) raises(DOMException);
SVGPathSeg removeItem(in unsigned long index) raises(DOMException);
SVGPathSeg appendItem(in SVGPathSeg newItem) raises(DOMException);
};
Інтерфейс SVGAnimatedPathData {
readonly attribute SVGPathSegList pathSegList;
readonly attribute SVGPathSegList normalizedPathSegList;
readonly attribute SVGPathSegList animatedPathSegList;
readonly attribute SVGPathSegList animatedNormalizedPathSegList;
};
Інтерфейс SVGPathElement : SVGElement,
SVGTests,
SVGLangSpace,
SVGExternalResourcesRequired,
SVGStylable,
SVGTransformable,
SVGAnimatedPathData {
readonly attribute SVGAnimatedNumber pathLength;
float getTotalLength();
SVGPoint getPointAtLength(in float distance);
unsigned long getPathSegAtLength(in float distance);
SVGPathSegClosePath createSVGPathSegClosePath();
SVGPathSegMovetoAbs createSVGPathSegMovetoAbs(in float x, in float y);
SVGPathSegMovetoRel createSVGPathSegMovetoRel(in float x, in float y);
SVGPathSegLinetoAbs createSVGPathSegLinetoAbs(in float x, in float y);
SVGPathSegLinetoRel createSVGPathSegLinetoRel(in float x, in float y);
SVGPathSegCurvetoCubicAbs createSVGPathSegCurvetoCubicAbs(in float x, in float y, in float x1, in float y1, in float x2, in float y2);
SVGPathSegCurvetoCubicRel createSVGPathSegCurvetoCubicRel(in float x, in float y, in float x1, in float y1, in float x2, in float y2);
SVGPathSegCurvetoQuadraticAbs createSVGPathSegCurvetoQuadraticAbs(in float x, in float y, in float x1, in float y1);
SVGPathSegCurvetoQuadraticRel createSVGPathSegCurvetoQuadraticRel(in float x, in float y, in float x1, in float y1);
SVGPathSegArcAbs createSVGPathSegArcAbs(in float x, in float y, in float r1, in float r2, in float angle, in boolean largeArcFlag, in boolean sweepFlag);
SVGPathSegArcRel createSVGPathSegArcRel(in float x, in float y, in float r1, in float r2, in float angle, in boolean largeArcFlag, in boolean sweepFlag);
SVGPathSegLinetoHorizontalAbs createSVGPathSegLinetoHorizontalAbs(in float x);
SVGPathSegLinetoHorizontalRel createSVGPathSegLinetoHorizontalRel(in float x);
SVGPathSegLinetoVerticalAbs createSVGPathSegLinetoVerticalAbs(in float y);
SVGPathSegLinetoVerticalRel createSVGPathSegLinetoVerticalRel(in float y);
SVGPathSegCurvetoCubicSmoothAbs createSVGPathSegCurvetoCubicSmoothAbs(in float x, in float y, in float x2, in float y2);
SVGPathSegCurvetoCubicSmoothRel createSVGPathSegCurvetoCubicSmoothRel(in float x, in float y, in float x2, in float y2);
SVGPathSegCurvetoQuadraticSmoothAbs createSVGPathSegCurvetoQuadraticSmoothAbs(in float x, in float y);
SVGPathSegCurvetoQuadraticSmoothRel createSVGPathSegCurvetoQuadraticSmoothRel(in float x, in float y);
};
Інтерфейс SVGRectElement : SVGElement,
SVGTests,
SVGLangSpace,
SVGExternalResourcesRequired,
SVGStylable,
SVGTransformable {
readonly attribute SVGAnimatedLength x;
readonly attribute SVGAnimatedLength y;
readonly attribute SVGAnimatedLength width;
readonly attribute SVGAnimatedLength height;
readonly attribute SVGAnimatedLength rx;
readonly attribute SVGAnimatedLength ry;
};
Інтерфейс SVGCircleElement : SVGElement,
SVGTests,
SVGLangSpace,
SVGExternalResourcesRequired,
SVGStylable,
SVGTransformable {
readonly attribute SVGAnimatedLength cx;
readonly attribute SVGAnimatedLength cy;
readonly attribute SVGAnimatedLength r;
};
Інтерфейс SVGEllipseElement : SVGElement,
SVGTests,
SVGLangSpace,
SVGExternalResourcesRequired,
SVGStylable,
SVGTransformable {
readonly attribute SVGAnimatedLength cx;
readonly attribute SVGAnimatedLength cy;
readonly attribute SVGAnimatedLength rx;
readonly attribute SVGAnimatedLength ry;
};
Інтерфейс SVGLineElement : SVGElement,
SVGTests,
SVGLangSpace,
SVGExternalResourcesRequired,
SVGStylable,
SVGTransformable {
readonly attribute SVGAnimatedLength x1;
readonly attribute SVGAnimatedLength y1;
readonly attribute SVGAnimatedLength x2;
readonly attribute SVGAnimatedLength y2;
};
Інтерфейс SVGAnimatedPoints {
readonly attribute SVGPointList points;
readonly attribute SVGPointList animatedPoints;
};
Інтерфейс SVGPolylineElement : SVGElement,
SVGTests,
SVGLangSpace,
SVGExternalResourcesRequired,
SVGStylable,
SVGTransformable,
SVGAnimatedPoints {
};
Інтерфейс SVGPolygonElement : SVGElement,
SVGTests,
SVGLangSpace,
SVGExternalResourcesRequired,
SVGStylable,
SVGTransformable,
SVGAnimatedPoints {
};
Інтерфейс SVGTextContentElement : SVGElement,
SVGTests,
SVGLangSpace,
SVGExternalResourcesRequired,
SVGStylable {
// lengthAdjust Types
const unsigned short LENGTHADJUST_UNKNOWN = 0;
const unsigned short LENGTHADJUST_SPACING = 1;
const unsigned short LENGTHADJUST_SPACINGANDGLYPHS = 2;
readonly attribute SVGAnimatedLength textLength;
readonly attribute SVGAnimatedEnumeration lengthAdjust;
long getNumberOfChars();
float getComputedTextLength();
float getSubStringLength(in unsigned long charnum, in unsigned long nchars) raises(DOMException);
SVGPoint getStartPositionOfChar(in unsigned long charnum) raises(DOMException);
SVGPoint getEndPositionOfChar(in unsigned long charnum) raises(DOMException);
SVGRect getExtentOfChar(in unsigned long charnum) raises(DOMException);
float getRotationOfChar(in unsigned long charnum) raises(DOMException);
long getCharNumAtPosition(in SVGPoint point);
void selectSubString(in unsigned long charnum, in unsigned long nchars) raises(DOMException);
};
Інтерфейс SVGTextPositioningElement : SVGTextContentElement {
readonly attribute SVGAnimatedLengthList x;
readonly attribute SVGAnimatedLengthList y;
readonly attribute SVGAnimatedLengthList dx;
readonly attribute SVGAnimatedLengthList dy;
readonly attribute SVGAnimatedNumberList rotate;
};
Інтерфейс SVGTextElement : SVGTextPositioningElement,
SVGTransformable {
};
Інтерфейс SVGTSpanElement : SVGTextPositioningElement {
};
Інтерфейс SVGTRefElement : SVGTextPositioningElement,
SVGURIReference {
};
Інтерфейс SVGTextPathElement : SVGTextContentElement,
SVGURIReference {
// textPath Method Types
const unsigned short TEXTPATH_METHODTYPE_UNKNOWN = 0;
const unsigned short TEXTPATH_METHODTYPE_ALIGN = 1;
const unsigned short TEXTPATH_METHODTYPE_STRETCH = 2;
// textPath Spacing Types
const unsigned short TEXTPATH_SPACINGTYPE_UNKNOWN = 0;
const unsigned short TEXTPATH_SPACINGTYPE_AUTO = 1;
const unsigned short TEXTPATH_SPACINGTYPE_EXACT = 2;
readonly attribute SVGAnimatedLength startOffset;
readonly attribute SVGAnimatedEnumeration method;
readonly attribute SVGAnimatedEnumeration spacing;
};
Інтерфейс SVGAltGlyphElement : SVGTextPositioningElement,
SVGURIReference {
attribute DOMString glyphRef setraises(DOMException);
attribute DOMString format setraises(DOMException);
};
Інтерфейс SVGAltGlyphDefElement : SVGElement {
};
Інтерфейс SVGAltGlyphItemElement : SVGElement {
};
Інтерфейс SVGGlyphRefElement : SVGElement,
SVGURIReference,
SVGStylable {
attribute DOMString glyphRef setraises(DOMException);
attribute DOMString format setraises(DOMException);
attribute float x setraises(DOMException);
attribute float y setraises(DOMException);
attribute float dx setraises(DOMException);
attribute float dy setraises(DOMException);
};
Інтерфейс SVGPaint : SVGColor {
// Paint Types
const unsigned short SVG_PAINTTYPE_UNKNOWN = 0;
const unsigned short SVG_PAINTTYPE_RGBCOLOR = 1;
const unsigned short SVG_PAINTTYPE_RGBCOLOR_ICCCOLOR = 2;
const unsigned short SVG_PAINTTYPE_NONE = 101;
const unsigned short SVG_PAINTTYPE_CURRENTCOLOR = 102;
const unsigned short SVG_PAINTTYPE_URI_NONE = 103;
const unsigned short SVG_PAINTTYPE_URI_CURRENTCOLOR = 104;
const unsigned short SVG_PAINTTYPE_URI_RGBCOLOR = 105;
const unsigned short SVG_PAINTTYPE_URI_RGBCOLOR_ICCCOLOR = 106;
const unsigned short SVG_PAINTTYPE_URI = 107;
readonly attribute unsigned short paintType;
readonly attribute DOMString uri;
void setUri(in DOMString uri);
void setPaint(in unsigned short paintType, in DOMString uri, in DOMString rgbColor, in DOMString iccColor) raises(SVGException);
};
Інтерфейс SVGMarkerElement : SVGElement,
SVGLangSpace,
SVGExternalResourcesRequired,
SVGStylable,
SVGFitToViewBox {
// Marker Unit Types
const unsigned short SVG_MARKERUNITS_UNKNOWN = 0;
const unsigned short SVG_MARKERUNITS_USERSPACEONUSE = 1;
const unsigned short SVG_MARKERUNITS_STROKEWIDTH = 2;
// Marker Orientation Types
const unsigned short SVG_MARKER_ORIENT_UNKNOWN = 0;
const unsigned short SVG_MARKER_ORIENT_AUTO = 1;
const unsigned short SVG_MARKER_ORIENT_ANGLE = 2;
readonly attribute SVGAnimatedLength refX;
readonly attribute SVGAnimatedLength refY;
readonly attribute SVGAnimatedEnumeration markerUnits;
readonly attribute SVGAnimatedLength markerWidth;
readonly attribute SVGAnimatedLength markerHeight;
readonly attribute SVGAnimatedEnumeration orientType;
readonly attribute SVGAnimatedAngle orientAngle;
void setOrientToAuto() raises(DOMException);
void setOrientToAngle(in SVGAngle angle) raises(DOMException);
};
Інтерфейс SVGColorProfileElement : SVGElement,
SVGURIReference,
SVGRenderingIntent {
attribute DOMString local;
attribute DOMString name;
attribute unsigned short renderingIntent;
};
Інтерфейс SVGColorProfileRule : SVGCSSRule,
SVGRenderingIntent {
attribute DOMString src setraises(DOMException);
attribute DOMString name setraises(DOMException);
attribute unsigned short renderingIntent setraises(DOMException);
};
Інтерфейс SVGGradientElement : SVGElement,
SVGURIReference,
SVGExternalResourcesRequired,
SVGStylable,
SVGUnitTypes {
// Spread Method Types
const unsigned short SVG_SPREADMETHOD_UNKNOWN = 0;
const unsigned short SVG_SPREADMETHOD_PAD = 1;
const unsigned short SVG_SPREADMETHOD_REFLECT = 2;
const unsigned short SVG_SPREADMETHOD_REPEAT = 3;
readonly attribute SVGAnimatedEnumeration gradientUnits;
readonly attribute SVGAnimatedTransformList gradientTransform;
readonly attribute SVGAnimatedEnumeration spreadMethod;
};
Інтерфейс SVGLinearGradientElement : SVGGradientElement {
readonly attribute SVGAnimatedLength x1;
readonly attribute SVGAnimatedLength y1;
readonly attribute SVGAnimatedLength x2;
readonly attribute SVGAnimatedLength y2;
};
Інтерфейс SVGRadialGradientElement : SVGGradientElement {
readonly attribute SVGAnimatedLength cx;
readonly attribute SVGAnimatedLength cy;
readonly attribute SVGAnimatedLength r;
readonly attribute SVGAnimatedLength fx;
readonly attribute SVGAnimatedLength fy;
};
Інтерфейс SVGStopElement : SVGElement,
SVGStylable {
readonly attribute SVGAnimatedNumber offset;
};
Інтерфейс SVGPatternElement : SVGElement,
SVGURIReference,
SVGTests,
SVGLangSpace,
SVGExternalResourcesRequired,
SVGStylable,
SVGFitToViewBox,
SVGUnitTypes {
readonly attribute SVGAnimatedEnumeration patternUnits;
readonly attribute SVGAnimatedEnumeration patternContentUnits;
readonly attribute SVGAnimatedTransformList patternTransform;
readonly attribute SVGAnimatedLength x;
readonly attribute SVGAnimatedLength y;
readonly attribute SVGAnimatedLength width;
readonly attribute SVGAnimatedLength height;
};
Інтерфейс SVGClipPathElement : SVGElement,
SVGTests,
SVGLangSpace,
SVGExternalResourcesRequired,
SVGStylable,
SVGTransformable,
SVGUnitTypes {
readonly attribute SVGAnimatedEnumeration clipPathUnits;
};
Інтерфейс SVGMaskElement : SVGElement,
SVGTests,
SVGLangSpace,
SVGExternalResourcesRequired,
SVGStylable,
SVGUnitTypes {
readonly attribute SVGAnimatedEnumeration maskUnits;
readonly attribute SVGAnimatedEnumeration maskContentUnits;
readonly attribute SVGAnimatedLength x;
readonly attribute SVGAnimatedLength y;
readonly attribute SVGAnimatedLength width;
readonly attribute SVGAnimatedLength height;
};
Інтерфейс SVGFilterElement : SVGElement,
SVGURIReference,
SVGLangSpace,
SVGExternalResourcesRequired,
SVGStylable,
SVGUnitTypes {
readonly attribute SVGAnimatedEnumeration filterUnits;
readonly attribute SVGAnimatedEnumeration primitiveUnits;
readonly attribute SVGAnimatedLength x;
readonly attribute SVGAnimatedLength y;
readonly attribute SVGAnimatedLength width;
readonly attribute SVGAnimatedLength height;
readonly attribute SVGAnimatedInteger filterResX;
readonly attribute SVGAnimatedInteger filterResY;
void setFilterRes(in unsigned long filterResX, in unsigned long filterResY) raises(DOMException);
};
Інтерфейс SVGFilterPrimitiveStandardAttributes : SVGStylable {
readonly attribute SVGAnimatedLength x;
readonly attribute SVGAnimatedLength y;
readonly attribute SVGAnimatedLength width;
readonly attribute SVGAnimatedLength height;
readonly attribute SVGAnimatedString result;
};
Інтерфейс SVGFEBlendElement : SVGElement,
SVGFilterPrimitiveStandardAttributes {
// Blend Mode Types
const unsigned short SVG_FEBLEND_MODE_UNKNOWN = 0;
const unsigned short SVG_FEBLEND_MODE_NORMAL = 1;
const unsigned short SVG_FEBLEND_MODE_MULTIPLY = 2;
const unsigned short SVG_FEBLEND_MODE_SCREEN = 3;
const unsigned short SVG_FEBLEND_MODE_DARKEN = 4;
const unsigned short SVG_FEBLEND_MODE_LIGHTEN = 5;
readonly attribute SVGAnimatedString in1;
readonly attribute SVGAnimatedString in2;
readonly attribute SVGAnimatedEnumeration mode;
};
Інтерфейс SVGFEColorMatrixElement : SVGElement,
SVGFilterPrimitiveStandardAttributes {
// Color Matrix Types
const unsigned short SVG_FECOLORMATRIX_TYPE_UNKNOWN = 0;
const unsigned short SVG_FECOLORMATRIX_TYPE_MATRIX = 1;
const unsigned short SVG_FECOLORMATRIX_TYPE_SATURATE = 2;
const unsigned short SVG_FECOLORMATRIX_TYPE_HUEROTATE = 3;
const unsigned short SVG_FECOLORMATRIX_TYPE_LUMINANCETOALPHA = 4;
readonly attribute SVGAnimatedString in1;
readonly attribute SVGAnimatedEnumeration type;
readonly attribute SVGAnimatedNumberList values;
};
Інтерфейс SVGFEComponentTransferElement : SVGElement,
SVGFilterPrimitiveStandardAttributes {
readonly attribute SVGAnimatedString in1;
};
Інтерфейс SVGComponentTransferFunctionElement : SVGElement {
// Component Transfer Types
const unsigned short SVG_FECOMPONENTTRANSFER_TYPE_UNKNOWN = 0;
const unsigned short SVG_FECOMPONENTTRANSFER_TYPE_IDENTITY = 1;
const unsigned short SVG_FECOMPONENTTRANSFER_TYPE_TABLE = 2;
const unsigned short SVG_FECOMPONENTTRANSFER_TYPE_DISCRETE = 3;
const unsigned short SVG_FECOMPONENTTRANSFER_TYPE_LINEAR = 4;
const unsigned short SVG_FECOMPONENTTRANSFER_TYPE_GAMMA = 5;
readonly attribute SVGAnimatedEnumeration type;
readonly attribute SVGAnimatedNumberList tableValues;
readonly attribute SVGAnimatedNumber slope;
readonly attribute SVGAnimatedNumber intercept;
readonly attribute SVGAnimatedNumber amplitude;
readonly attribute SVGAnimatedNumber exponent;
readonly attribute SVGAnimatedNumber offset;
};
Інтерфейс SVGFEFuncRElement : SVGComponentTransferFunctionElement {
};
Інтерфейс SVGFEFuncGElement : SVGComponentTransferFunctionElement {
};
Інтерфейс SVGFEFuncBElement : SVGComponentTransferFunctionElement {
};
Інтерфейс SVGFEFuncAElement : SVGComponentTransferFunctionElement {
};
Інтерфейс SVGFECompositeElement : SVGElement,
SVGFilterPrimitiveStandardAttributes {
// Composite Operators
const unsigned short SVG_FECOMPOSITE_OPERATOR_UNKNOWN = 0;
const unsigned short SVG_FECOMPOSITE_OPERATOR_OVER = 1;
const unsigned short SVG_FECOMPOSITE_OPERATOR_IN = 2;
const unsigned short SVG_FECOMPOSITE_OPERATOR_OUT = 3;
const unsigned short SVG_FECOMPOSITE_OPERATOR_ATOP = 4;
const unsigned short SVG_FECOMPOSITE_OPERATOR_XOR = 5;
const unsigned short SVG_FECOMPOSITE_OPERATOR_ARITHMETIC = 6;
readonly attribute SVGAnimatedString in1;
readonly attribute SVGAnimatedString in2;
readonly attribute SVGAnimatedEnumeration operator;
readonly attribute SVGAnimatedNumber k1;
readonly attribute SVGAnimatedNumber k2;
readonly attribute SVGAnimatedNumber k3;
readonly attribute SVGAnimatedNumber k4;
};
Інтерфейс SVGFEConvolveMatrixElement : SVGElement,
SVGFilterPrimitiveStandardAttributes {
// Edge Mode Values
const unsigned short SVG_EDGEMODE_UNKNOWN = 0;
const unsigned short SVG_EDGEMODE_DUPLICATE = 1;
const unsigned short SVG_EDGEMODE_WRAP = 2;
const unsigned short SVG_EDGEMODE_NONE = 3;
readonly attribute SVGAnimatedString in1;
readonly attribute SVGAnimatedInteger orderX;
readonly attribute SVGAnimatedInteger orderY;
readonly attribute SVGAnimatedNumberList kernelMatrix;
readonly attribute SVGAnimatedNumber divisor;
readonly attribute SVGAnimatedNumber bias;
readonly attribute SVGAnimatedInteger targetX;
readonly attribute SVGAnimatedInteger targetY;
readonly attribute SVGAnimatedEnumeration edgeMode;
readonly attribute SVGAnimatedNumber kernelUnitLengthX;
readonly attribute SVGAnimatedNumber kernelUnitLengthY;
readonly attribute SVGAnimatedBoolean preserveAlpha;
};
Інтерфейс SVGFEDiffuseLightingElement : SVGElement,
SVGFilterPrimitiveStandardAttributes {
readonly attribute SVGAnimatedString in1;
readonly attribute SVGAnimatedNumber surfaceScale;
readonly attribute SVGAnimatedNumber diffuseConstant;
readonly attribute SVGAnimatedNumber kernelUnitLengthX;
readonly attribute SVGAnimatedNumber kernelUnitLengthY;
};
Інтерфейс SVGFEDistantLightElement : SVGElement {
readonly attribute SVGAnimatedNumber azimuth;
readonly attribute SVGAnimatedNumber elevation;
};
Інтерфейс SVGFEPointLightElement : SVGElement {
readonly attribute SVGAnimatedNumber x;
readonly attribute SVGAnimatedNumber y;
readonly attribute SVGAnimatedNumber z;
};
Інтерфейс SVGFESpotLightElement : SVGElement {
readonly attribute SVGAnimatedNumber x;
readonly attribute SVGAnimatedNumber y;
readonly attribute SVGAnimatedNumber z;
readonly attribute SVGAnimatedNumber pointsAtX;
readonly attribute SVGAnimatedNumber pointsAtY;
readonly attribute SVGAnimatedNumber pointsAtZ;
readonly attribute SVGAnimatedNumber specularExponent;
readonly attribute SVGAnimatedNumber limitingConeAngle;
};
Інтерфейс SVGFEDisplacementMapElement : SVGElement,
SVGFilterPrimitiveStandardAttributes {
// Channel Selectors
const unsigned short SVG_CHANNEL_UNKNOWN = 0;
const unsigned short SVG_CHANNEL_R = 1;
const unsigned short SVG_CHANNEL_G = 2;
const unsigned short SVG_CHANNEL_B = 3;
const unsigned short SVG_CHANNEL_A = 4;
readonly attribute SVGAnimatedString in1;
readonly attribute SVGAnimatedString in2;
readonly attribute SVGAnimatedNumber scale;
readonly attribute SVGAnimatedEnumeration xChannelSelector;
readonly attribute SVGAnimatedEnumeration yChannelSelector;
};
Інтерфейс SVGFEFloodElement : SVGElement,
SVGFilterPrimitiveStandardAttributes {
};
Інтерфейс SVGFEGaussianBlurElement : SVGElement,
SVGFilterPrimitiveStandardAttributes {
readonly attribute SVGAnimatedString in1;
readonly attribute SVGAnimatedNumber stdDeviationX;
readonly attribute SVGAnimatedNumber stdDeviationY;
void setStdDeviation(in float stdDeviationX, in float stdDeviationY) raises(DOMException);
};
Інтерфейс SVGFEImageElement : SVGElement,
SVGURIReference,
SVGLangSpace,
SVGExternalResourcesRequired,
SVGFilterPrimitiveStandardAttributes {
readonly attribute SVGAnimatedPreserveAspectRatio preserveAspectRatio;
};
Інтерфейс SVGFEMergeElement : SVGElement,
SVGFilterPrimitiveStandardAttributes {
};
Інтерфейс SVGFEMergeNodeElement : SVGElement {
readonly attribute SVGAnimatedString in1;
};
Інтерфейс SVGFEMorphologyElement : SVGElement,
SVGFilterPrimitiveStandardAttributes {
// Morphology Operators
const unsigned short SVG_MORPHOLOGY_OPERATOR_UNKNOWN = 0;
const unsigned short SVG_MORPHOLOGY_OPERATOR_ERODE = 1;
const unsigned short SVG_MORPHOLOGY_OPERATOR_DILATE = 2;
readonly attribute SVGAnimatedString in1;
readonly attribute SVGAnimatedEnumeration operator;
readonly attribute SVGAnimatedNumber radiusX;
readonly attribute SVGAnimatedNumber radiusY;
};
Інтерфейс SVGFEOffsetElement : SVGElement,
SVGFilterPrimitiveStandardAttributes {
readonly attribute SVGAnimatedString in1;
readonly attribute SVGAnimatedNumber dx;
readonly attribute SVGAnimatedNumber dy;
};
Інтерфейс SVGFESpecularLightingElement : SVGElement,
SVGFilterPrimitiveStandardAttributes {
readonly attribute SVGAnimatedString in1;
readonly attribute SVGAnimatedNumber surfaceScale;
readonly attribute SVGAnimatedNumber specularConstant;
readonly attribute SVGAnimatedNumber specularExponent;
readonly attribute SVGAnimatedNumber kernelUnitLengthX;
readonly attribute SVGAnimatedNumber kernelUnitLengthY;
};
Інтерфейс SVGFETileElement : SVGElement,
SVGFilterPrimitiveStandardAttributes {
readonly attribute SVGAnimatedString in1;
};
Інтерфейс SVGFETurbulenceElement : SVGElement,
SVGFilterPrimitiveStandardAttributes {
// Turbulence Types
const unsigned short SVG_TURBULENCE_TYPE_UNKNOWN = 0;
const unsigned short SVG_TURBULENCE_TYPE_FRACTALNOISE = 1;
const unsigned short SVG_TURBULENCE_TYPE_TURBULENCE = 2;
// Stitch Options
const unsigned short SVG_STITCHTYPE_UNKNOWN = 0;
const unsigned short SVG_STITCHTYPE_STITCH = 1;
const unsigned short SVG_STITCHTYPE_NOSTITCH = 2;
readonly attribute SVGAnimatedNumber baseFrequencyX;
readonly attribute SVGAnimatedNumber baseFrequencyY;
readonly attribute SVGAnimatedInteger numOctaves;
readonly attribute SVGAnimatedNumber seed;
readonly attribute SVGAnimatedEnumeration stitchTiles;
readonly attribute SVGAnimatedEnumeration type;
};
Інтерфейс SVGCursorElement : SVGElement,
SVGURIReference,
SVGTests,
SVGExternalResourcesRequired {
readonly attribute SVGAnimatedLength x;
readonly attribute SVGAnimatedLength y;
};
Інтерфейс SVGAElement : SVGElement,
SVGURIReference,
SVGTests,
SVGLangSpace,
SVGExternalResourcesRequired,
SVGStylable,
SVGTransformable {
readonly attribute SVGAnimatedString target;
};
Інтерфейс SVGViewElement : SVGElement,
SVGExternalResourcesRequired,
SVGFitToViewBox,
SVGZoomAndPan {
readonly attribute SVGStringList viewTarget;
};
Інтерфейс SVGScriptElement : SVGElement,
SVGURIReference,
SVGExternalResourcesRequired {
attribute DOMString type setraises(DOMException);
};
Інтерфейс SVGZoomEvent : UIEvent {
readonly attribute SVGRect zoomRectScreen;
readonly attribute float previousScale;
readonly attribute SVGPoint previousTranslate;
readonly attribute float newScale;
readonly attribute SVGPoint newTranslate;
};
Інтерфейс SVGAnimationElement : SVGElement,
SVGTests,
SVGExternalResourcesRequired,
ElementTimeControl {
readonly attribute SVGElement targetElement;
float getStartTime() raises(DOMException);
float getCurrentTime();
float getSimpleDuration() raises(DOMException);
};
Інтерфейс SVGAnimateElement : SVGAnimationElement,
SVGStylable {
};
Інтерфейс SVGSetElement : SVGAnimationElement {
};
Інтерфейс SVGAnimateMotionElement : SVGAnimationElement {
};
Інтерфейс SVGMPathElement : SVGElement,
SVGURIReference,
SVGExternalResourcesRequired {
};
Інтерфейс SVGAnimateColorElement : SVGAnimationElement,
SVGStylable {
};
Інтерфейс SVGAnimateTransformElement : SVGAnimationElement {
};
Інтерфейс SVGFontElement : SVGElement,
SVGExternalResourcesRequired,
SVGStylable {
};
Інтерфейс SVGGlyphElement : SVGElement,
SVGStylable {
};
Інтерфейс SVGMissingGlyphElement : SVGElement,
SVGStylable {
};
Інтерфейс SVGHKernElement : SVGElement {
};
Інтерфейс SVGVKernElement : SVGElement {
};
Інтерфейс SVGFontFaceElement : SVGElement {
};
Інтерфейс SVGFontFaceSrcElement : SVGElement {
};
Інтерфейс SVGFontFaceUriElement : SVGElement {
};
Інтерфейс SVGFontFaceFormatElement : SVGElement {
};
Інтерфейс SVGFontFaceNameElement : SVGElement {
};
Інтерфейс SVGMetadataElement : SVGElement {
};
Інтерфейс SVGForeignObjectElement : SVGElement,
SVGTests,
SVGLangSpace,
SVGExternalResourcesRequired,
SVGStylable,
SVGTransformable {
readonly attribute SVGAnimatedLength x;
readonly attribute SVGAnimatedLength y;
readonly attribute SVGAnimatedLength width;
readonly attribute SVGAnimatedLength height;
};
};
This appendix is informative, not normative.
Java language binding for the SVG Document Object Model definitions is available at:
http://www.w3.org/TR/2011/REC-SVG11-20110816/java-binding.zip
Note that this language binding is not normative. IDL Definitions are the normative parts of the SVG DOM.
When scripting SVG with a language such as ECMAScript, it is possible to embed script code directly in the SVG content using the ‘script’ element and the event attributes (тобто, ‘onload’ or ‘onclick’). For programming languages with a binary delivery format, such as the Java language, it is not possible to embed the code into the ‘script’ element or within the event attributes. Therefore there is a need to specify how such languages can bind to and handle events in the SVG document. following technique описує how this should be done when using the Java language and what is expected of the користувацький агент that supports dynamic SVG content through the Java language.
<script type="application/java-archive" xlink:href="myJavaHandlers.jar"/>
Manifest-Version: 1.1 SVG-Handler-Class: org.example.svg.SVGHandler
public interface EventListenerInitializer {
void initializeEventListeners(SVGDocument doc);
}
event binding of other binary programming languages is not specified.
This appendix is normative.
This appendix описує how to expose the SVG DOM to an ECMAScript language environment [ECMA-262].
For descriptions of how interfaces and exceptions defined in other specifications are to be exposed to an ECMAScript language environment, consult the relevant specification:
SVG DOM defines a single exception, SVGException, which is exposed to an ECMAScript language environment as follows.
ECMAScript global object has a property named "SVGException"
whose value is an object with the following properties:
"SVG_WRONG_TYPE_ERR", whose
value is the Number value 1."SVG_INVALID_VALUE_ERR",
whose value is the Number value 2."SVG_MATRIX_NOT_INVERTABLE",
whose value is the Number value 3.A host object that is an SVGException
also has these three properties on itself, or somewhere in its prototype
chain. Every such host object also has a read only property named "code"
whose value is a Number,
corresponding to the code
exception member on SVGException.
For every interface defined in the SVG DOM that has one or more constants defined on it, there exists a property on the ECMAScript global object whose name is the name of the interface, and whose value is an object with a read only property for each of the constants. name of each of these read only properties is the name of the corresponding constant, and the value is a Number with the same value as that of the constant.
A host object that implements an interface with constants defined on it has, on itself or somewhere in its prototype chain, these properties that correspond to the constants.
following table gives the corresponding ECMAScript type for the IDL primitive types used in the SVG DOM.
| IDL type | ECMAScript type |
|---|---|
| boolean | Boolean |
| float | Number |
| long | Number |
| unsigned short | Number |
| unsigned long | Number |
| DOMString | String |
When an ECMAScript Number is assigned to a property that corresponds to an attribute of an IDL integer type (long, unsigned short or unsigned long), or it is passed as an argument passed to an operation for which the argument type is an IDL integer type, then behavior is undefined if the Number value is not an integer within the range of that type.
For an interface type, a host object that implements the given interface is used.
A host object that implements a given interface has properties on itself, or in its prototype chain, that correspond to the operations and attributes defined on that interface and all its superinterfaces.
A property that corresponds to an attribute is read only if the attribute is read only, and has a name that is the same as the name of the attribute. When getting the property, a значення a type according to the Types section above is returned. When setting the property, if it is not read only, then behavior is defined only if a значення a type according to the Types section is assigned to it.
For example, if a is a host object that implements the SVGLength interface, then evaluating the statement:
a.valueAsString = "10";
has defined behavior, but evaluating the statement:
a.valueAsString = 10;
does not.
A property that corresponds to an operation has a name that is the same as the name of the operation, and has a value that is a Function object. value returned from the Function is of a type according to the table in the Types section above. When calling the Function, behavior is only defined if the correct number of arguments is passed, and the type of each argument is the type according to the Types table. Also, behavior is only defined for invoking the Function with a this value that is equal to the object from which the Function was obtained.
For example, if L1 and L2 are two distinct host objects that implement the SVGPointList interface and p is a host object that implements the SVGPoint interface, then evaluating the following statement has defined behavior:
L1.insertItemBefore(p, 0);
Evaluating any of the following statements, however, does not:
L1.insertItemBefore(p, '0');
L1.insertItemBefore(p, -1);
L1.insertItemBefore(p, 0.5);
L1.insertItemBefore(p);
L1.insertItemBefore(p, 0, 0);
L1.insertItemBefore({ x: 10, y: 20 }, 0);
L1.insertItemBefore.call([], p, 0);
L1.insertItemBefore.call(L2, p, 0);
This appendix is normative.
following are notes about implementation requirements corresponding to various features in the SVG language.
There are various scenarios where an фрагменту документу SVG is technically in error:
A document can go in and out of error over time. For example, document changes from the SVG DOM or from animation can cause a document to become in error and a further change can cause the document to become correct again.
following error processing shall occur when a document is in error:
Because of situations where a block of scripting changes might cause a given фрагменту документу SVG to go into and out of error, error processing shall occur only at times when document presentation (тобто, rendering to the display device) is updated. In particular, error processing shall be disabled whenever redraw has been suspended via DOM calls to suspendRedraw.
SVG користувацький агент must verify the reference to the PUBLIC
identifier in the <!DOCTYPE> statement or the
namespace reference in the ‘xmlns’
attribute on the ‘svg’
element to ensure that the given document (or фрагмент документу)
identifies a version of the SVG language which the SVG користувацький
агент supports. Якщо the version information is missing or the version
information indicates a version of the SVG language which the SVG
користувацький агент does not support, then the SVG користувацький агент
is not required to render that document or fragment. In particular, it
is not required that an SVG користувацький агент attempt to render
future versions of the SVG language. Якщо the user environment provides
such an option, the користувацький агент should alert or otherwise
notify the user that the version of the file is not supported and
suggest an alternate processing option (тобто, installing an updated
version of the користувацький агент) if such an option exists.
An SVG користувацький агент which supports the SVG Recommendation
should alert or otherwise notify the user whenever it encounters
документ SVG (or фрагмент документу) whose <!DOCTYPE>
statement or corresponding ‘xmlns’
attribute corresponds to a working draft version of the SVG
specification. All content based on working drafts of this specification
should be updated to the SVG Recommendation.
Some numeric attribute and property values have restricted ranges, such as color component values. When out-of-range values are provided, the користувацький агент shall defer any error checking until after presentation time, as composited actions might produce intermediate values which are out-of-range but final values which are within range.
Color values are not in error if they are out-of-range, even if final computations produce an out-of-range color value at presentation time. It is recommended that користувацькі агенти clamp color values to the nearest color value (possibly determined by simple clipping) which the system can process as late as possible (тобто, presentation time), although it is acceptable for користувацькі агенти to clamp color values as early as parse time. Thus, implementation dependencies might preclude consistent behavior across different systems when out-of-range color values are used.
Opacity values out-of-range are not in error and should be clamped to the range 0 to 1 at the time which opacity values have to be processed (тобто, at presentation time or when it is necessary to perform intermediate filter effect calculations).
A conforming SVG користувацький агент must implement path rendering as follows:
(newx1, newy1) = (curx - (oldx2 - curx), cury - (oldy2 - cury))
= (2*curx - oldx2, 2*cury - oldy2)
An elliptical arc is a particular path command. As such, it is described by the following parameters in order:
(x1, y1) are the absolute coordinates of the current point on the path, obtained from the last two parameters of the previous path command.
rx and ry are the radii of the ellipse (also known as its semi-major and semi-minor axes).
φ is the angle from the x-axis of the current coordinate system to the x-axis of the ellipse.
fA is the large arc flag, and is 0 if an arc spanning less than or equal to 180 degrees is chosen, or 1 if an arc spanning greater than 180 degrees is chosen.
fS is the sweep flag, and is 0 if the line joining center to arc sweeps through decreasing angles, or 1 if it sweeps through increasing angles.
(x2, y2) are the absolute coordinates of the final point of the arc.
This parameterization of elliptical arcs will be referred to as endpoint parameterization. One of the advantages of endpoint parameterization is that it permits a consistent path syntax in which all path commands end in the coordinates of the new "current point". following notes give rules and formulas to help implementers deal with endpoint parameterization.
Arbitrary numerical values are permitted for all elliptical arc parameters, but where these values are invalid or out-of-range, an implementation must make sense of them as follows:
Якщо the endpoints (x1, y1) and (x2, y2) are identical, then this is equivalent to omitting the elliptical arc segment entirely.
Якщо rx = 0 or ry = 0 then this arc is treated as a straight line segment (a "lineto") joining the endpoints.
Якщо rx or ry have negative signs, these are dropped; the absolute value is used instead.
Якщо rx, ry and φ are such that there is no solution (basically, the ellipse is not big enough to reach from (x1, y1) to (x2, y2)) then the ellipse is scaled up uniformly until there is exactly one solution (until the ellipse is just big enough).
φ is taken mod 360 degrees.
Any nonzero value for either of the flags fA or fS is taken to mean the value 1.
This forgiving yet consistent treatment of out-of-range values ensures that:
An arbitrary point (x, y) on the elliptical arc can be described by the 2-dimensional matrix equation
![]() |
(F.6.3.1) |
(cx, cy) are the coordinates of the center of the ellipse.
rx and ry are the radii of the ellipse (also known as its semi-major and semi-minor axes).
θ is the angle from the x-axis of the current coordinate system to the x-axis of the ellipse.
θ ranges from:
Якщо one thinks of an ellipse as a circle that has been stretched and then rotated, then θ1, θ2 and Δθ are the start angle, end angle and sweep angle, respectively of the arc prior to the stretch and rotate operations. This leads to an alternate parameterization which is common among graphics APIs, which will be referred to as center parameterization. In the next sections, formulas are given for mapping in both directions between center parameterization and endpoint parameterization.
Given the following variables:
cx cy rx ry φ θ1 Δθ
the task is to find:
x1 y1 x2 y2 fA fS
This can be achieved using the following formulas:
![]() |
(F.6.4.1) |
![]() |
(F.6.4.2) |
![]() |
(F.6.4.3) |
![]() |
(F.6.4.4) |
Given the following variables:
x1 y1 x2 y2 fA fS rx ry φ
the task is to find:
cx cy θ1 Δθ
equations simplify after a translation which places the origin at the midpoint of the line joining (x1, y1) to (x2, y2), followed by a rotation to line up the coordinate axes with the axes of the ellipse. All transformed coordinates will be written with primes. They are computed as intermediate values on the way toward finding the required center parameterization variables. This procedure consists of the following steps:
Step 1: Compute (x1′, y1′)
![]() |
(F.6.5.1) |
Step 2: Compute (cx′, cy′)
![]() |
(F.6.5.2) |
where the + sign is chosen if fA ≠ fS, and the − sign is chosen if fA = fS.
Step 3: Compute (cx, cy) from (cx′, cy′)
![]() |
(F.6.5.3) |
Step 4: Compute θ1 and Δθ
In general, the angle between two vectors (ux, uy) and (vx, vy) can be computed as
![]() |
(F.6.5.4) |
where the ± sign appearing here is the sign of ux vy − uy vx.
This angle function can бути використано to express θ1 and Δθ as follows:
![]() |
(F.6.5.5) |
![]() |
(F.6.5.6) |
where θ1 is fixed in the range −360° < Δθ < 360° such that:
if fS = 0, then Δθ < 0,
else if fS = 1, then Δθ > 0.
In other words, if fS = 0 and the right side of (F.6.5.6) is greater than 0, then subtract 360°, whereas if fS = 1 and the right side of (F.6.5.6) is less than 0, then add 360°. In all other cases leave it as is.
This section formalizes the adjustments to out-of-range rx and ry mentioned in F.6.2. Algorithmically these adjustments consist of the following steps:
Step 1: Ensure radii are non-zero
Якщо rx = 0 or ry = 0, then treat this as a straight line from (x1, y1) to (x2, y2) and stop. Otherwise,
Step 2: Ensure radii are positive
Take the absolute значення rx and ry:
![]() |
(F.6.6.1) |
Step 3: Ensure radii are large enough
Using the primed coordinate values of equation (F.6.5.1), compute
![]() |
(F.6.6.2) |
Якщо the result of the above equation is less than or equal to 1, then no further change need be made to rx and ry. Якщо the result of the above equation is greater than 1, then make the replacements
![]() |
(F.6.6.3) |
Step 4: Proceed with computations
Proceed with the remaining elliptical arc computations, such as those in section F.6.5. Note: As a consequence of the radii corrections in this section, equation (F.6.5.2) for the center of the ellipse always has at least one solution (i.e. the radicand is never negative). In the case that the radii are scaled up using equation (F.6.6.3), the radicand of (F.6.5.2) is zero and there is exactly one solution for the center of the ellipse.
following implementation notes describe the algorithm for deciding which characters are selected during a text selection operation.
As the text selection operation occurs (тобто, while the user clicks and drags the mouse to identify the selection), the користувацький агент determines a start selection position and an end selection position, each of which represents a position in the text string between two characters. After determining start selection position and end selection position, the користувацький агент selects the appropriate characters, where the resulting text selection consists of either:
On systems with pointer devices, to determine the start selection position, the SVG користувацький агент determines which boundary between characters corresponding to rendered glyphs is the best target (тобто, closest) based on the current pointer location at the time of the event that initiates the selection operation (тобто, the mouse down event). користувацький агент then tracks the completion of the selection operation (тобто, the mouse drag, followed ultimately by the mouse up). At the end of the selection operation, the користувацький агент determines which boundary between characters is the best target (тобто, closest) for the end selection position.
Якщо no character reordering has occurred due to bidirectionality, then the selection consists of all characters between the start selection position and end selection position. For example, if a ‘text’ element contains the string "abcdef" and the start selection position and end selection positions are 0 and 3 respectively (assuming the left side of the "a" is position zero), then the selection will consist of "abc".
When the користувацький агент is implementing selection of bidirectional text, and when the selection starts (or ends) between characters which are not contiguous in logical order, then there might be multiple potential combinations of characters that can be considered part of the selection. algorithms to choose among the combinations of potential selection options shall choose the selection option which most closely matches the text string's visual rendering order.
When multiple characters map inseparably to a given set of one or more glyphs, the користувацький агент can either disallow the selection to start in the middle of the glyph set or can attempt to allocate portions of the area taken up by the glyph set to the characters that correspond to the glyph.
For systems which support pointer devices such as a mouse, the користувацький агент is required to provide a mechanism for selecting text even when the given text has associated event handlers or links, which might block text selection due to event processing precedence rules (дивіться Pointer events). One implementation option: For platforms which support a pointer device such as a mouse, the користувацький агент may provide for a small additional region around character cells which initiates text selection operations but does not initiate event handlers or links.
For користувацькі агенти which support both zooming on display devices and printing, it is recommended that the default printing option produce printed output that reflects the display device's current view of the current фрагменту документу SVG (assuming there is no media-specific styling), taking into account any zooming and panning done by the user, the current state of animation, and any document changes due to DOM and scripting. Thus, if the user zooms into a particular area of a map on the display device and then requests a hardcopy, the hardcopy should show the same view of the map as appears on the display device. Якщо a user pauses an animation and prints, the hardcopy should show the same graphics as the currently paused picture on the display device. Якщо scripting has added or removed elements from the document, then the hardcopy should reflect the same changes that would be reflected on the display.
When документ SVG is rendered on a static-only device such as a printer which does not support SVG's animation and scripting and facilities, then the користувацький агент shall ignore any animation and scripting elements in the document and render the remaining графічний елементи according to the rules in this specification.
This appendix is normative.
In order to ensure that SVG-family documents are maximally portable among SVG-family користувацькі агенти, this specification rigidly defines conformance requirements for both, as well as for SVG-family document types. While the conformance definitions can be found in this appendix, they necessarily reference normative text within this document and within other related specifications. It is only possible to fully comprehend the conformance requirements of SVG through a complete reading of all normative references.
An фрагменту документу SVG is a Conforming SVG Document Fragment if it adheres to the specification described in this document (Scalable Vector Graphics (SVG) Specification) and also:
<?xml-stylesheet?> processing instruction
conforms to Associating
stylesheets with XML documents [XML-SS],<?xml version="V"
encoding="E"?>),<!DOCTYPE svg PUBLIC
"-//W3C//DTD SVG 1.1//EN" SYSTEM
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">,
andxlink.фрагменту документу SVGs can be included within parent XML documents using the XML namespace facilities described in Namespaces in XML [XML-XS]. Note, however, that since a Conforming SVG Document Fragment must have an ‘svg’ element as its root, the use of an individual non-‘svg’ element from the SVG namespace is disallowed. Thus, the SVG part of the following document is not conforming:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE SomeParentXMLGrammar PUBLIC "-//SomeParent" "http://SomeParentXMLGrammar.dtd">
<ParentXML>
<!-- Elements from ParentXML go here -->
<!-- following is not conforming -->
<z:rect xmlns:z="http://www.w3.org/2000/svg"
x="0" y="0" width="10" height="10" />
<!-- More elements from ParentXML go here -->
</ParentXML>
Instead, for the SVG part to become a Conforming SVG Document Fragment, the file could be modified as follows:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE SomeParentXMLGrammar PUBLIC "-//SomeParent" "http://SomeParentXMLGrammar.dtd">
<ParentXML>
<!-- Elements from ParentXML go here -->
<!-- following is conforming -->
<z:svg xmlns:z="http://www.w3.org/2000/svg"
width="100px" height="100px">
<z:rect x="0" y="0" width="10" height="10"/>
</z:svg>
<!-- More elements from ParentXML go here -->
</ParentXML>
SVG language or these conformance criteria provide no designated size limits on any aspect of SVG content. There are no maximum values on the number of elements, the amount of character data, or the number of characters in attribute values.
A file is a Conforming SVG Stand-Alone File if:
A Conforming SVG Generator is a program which:
Additionally, an authoring tool which is a Conforming SVG Generator conforms to all of the Priority 1 accessibility guidelines from the document Authoring Tool Accessibility Guidelines 1.0 [ATAG] that are relevant to generators of SVG content. (Priorities 2 and 3 are encouraged but not required for conformance.)
SVG generators are encouraged to follow W3C developments in the area of internationalization. Of particular interest is the W3C Character Model and the concept of Webwide Early Uniform Normalization, which promises to enhance the interchangability of Unicode character data across users and applications. Future versions of the SVG specification are likely to require support of the W3C Character Model in Conforming SVG Generators.
Conforming SVG Servers must meet all the requirements of a Conforming
SVG Generator. In addition, Conforming SVG Servers using HTTP or other
protocols that use Internet Media types must serve SVG stand-alone files
with the media type "image/svg+xml".
Also, if the SVG file is compressed with gzip or deflate, Conforming SVG Servers must indicate this with the appropriate header, according to what the protocol supports. Specifically, for content compressed by the server immediately prior to transfer, the server must use the "Transfer-Encoding: gzip" or "Transfer-Encoding: deflate" headers as appropriate, and for content stored in a compressed format on the server (e.g. with the file extension "svgz"), the server must use the "Content-Encoding: gzip" or "Content-Encoding: deflate" headers as appropriate.
Note: Compression of stored content (the "entity," in HTTP terms) is distinct from automatic compression of the message body, as defined in HTTP/1.1 TE/ Transfer Encoding ([RFC2616], sections 14.39 and 14.41).
A DOM subtree rooted at a given element is a Conforming SVG DOM Subtree if, once serialized to XML, is a Conforming SVG Document Fragment. Якщо the DOM subtree cannot be serialized to XML, such as when a Comment node's data contains the substring "--", then the subtree is not a Conforming SVG DOM Subtree.
An SVG interpreter is a program which can parse and process фрагменту документу SVGs. Прикладs of SVG interpreters are server-side transcoding tools (тобто, a tool which converts SVG content into modified SVG content) or analysis tools (тобто, a tool which extracts the text content from SVG content). An SVG viewer also satisfies the requirements of an SVG interpreter in that it can parse and process фрагменту документу SVGs, where processing consists of rendering the SVG content to the target medium.
In a Conforming SVG Interpreter, the XML parser must be able to parse and process all XML constructs defined within XML 1.0 [XML10] and Namespaces in XML [XML-NS].
There are two sub-categories of Conforming SVG Interpreters:
A Conforming SVG Interpreter must parse any SVG document correctly. It is not required to interpret the semantics of all features correctly.
Note: A transcoder from SVG into another graphics representation, such as an SVG-to-raster transcoder, represents a viewer, and thus viewer conformance criteria apply. ( Дивіться Conforming SVG Viewers.)
An SVG viewer is a program which can parse and process an фрагменту документу SVG and render the contents of the document onto some sort of output medium such as a display or printer; таким чином, an SVG Viewer is also an SVG Interpreter.
There are two sub-categories of Conforming SVG Viewers:
Specific criteria that apply to both Conforming Static SVG Viewers and Conforming Dynamic SVG Viewers:
Although anti-aliasing support is not a strict requirement for a Conforming SVG Viewer, it is highly recommended for display devices. Lack of anti-aliasing support will generally result in poor results on display devices.
Specific criteria that apply to only Conforming Dynamic SVG Viewers:
Web Accessibility Initiative is defining користувацький агент Accessibility Guidelines 1.0 [UAAG]. Viewers are encouraged to conform to the Priority 1 accessibility guidelines defined in this document, and preferably also Priorities 2 and 3. Once the guidelines are completed, a future version of this specification is likely to require conformance to the Priority 1 guidelines in Conforming SVG Viewers.
A higher order concept is that of a Conforming High-Quality SVG Viewer, with sub-categories Conforming High-Quality Static SVG Viewer and Conforming High-Quality Dynamic SVG Viewer.
Both a Conforming High-Quality Static SVG Viewer and a Conforming High-Quality Dynamic SVG Viewer must support the following additional features:
A Conforming High-Quality Dynamic SVG Viewer must support the following additional features:
A Conforming SVG Viewer must be able to apply styling properties to SVG content using елементи презентації.
Якщо the користувацький агент supports Cascading Style Sheets, level 2 [CSS2], a Conforming SVG Viewer must support CSS styling of SVG content and must support all features from CSS2 that are described in this specification as applying to SVG (дивіться properties shared with CSS and XSL, Styling with CSS and Facilities from CSS and XSL used by SVG). supported features from CSS2 must be implemented in accordance with the conformance definitions from the CSS2 specification ([CSS2], section 3.2).
Якщо the користувацький агент includes an HTML or XHTML viewing capability or can apply CSS/XSL styling properties to XML documents, then a Conforming SVG Viewer must support resources of MIME type "image/svg+xml" wherever raster image external resources can бути використано, such as in the HTML or XHTML ‘img’ element and in CSS/XSL properties that can refer to raster image resources (тобто, ‘background-image’).
This appendix is informative, not normative.
This appendix explains how accessibility guidelines published by W3C's Web Accessibility Initiative (WAI) apply to SVG.
W3C Note Accessibility Features of SVG [SVG-ACCESS] explains in detail how the requirements of the three guidelines apply to SVG.
This section explains briefly how authors can create accessible SVG documents; it summarizes Accessibility Features of SVG [SVG-ACCESS].
This appendix is informative, not normative.
This appendix provides a brief summary of SVG's support for internationalization. appendix is hyperlinked to the sections of the specification which elaborate on particular topics.
SVG is an application of XML [XML10] and thus supports Unicode [UNICODE], which defines a standard universal character set.
Additionally, SVG provides a mechanism for precise control of the glyphs used to draw text strings, which is described in Alternate glyphs. This facility provides:
SVG supports:
SVG fonts support contextual glyph selection for Arabic and Han text.
Multi-language SVG documents are possible by utilizing the ‘systemLanguage’ attribute to have different text strings appear based on the client machine's language setting.
SVG generators should follow W3C guidelines for normalizing character data [CHARMOD]. When precise control over glyph selection is required, use the facilities for Alternate glyphs to override the користувацький агент's character-to-glyph mapping algorithms.
This appendix is informative, not normative.
Considerable effort has been made to make SVG file sizes as small as possible while still retaining the benefits of XML and achieving compatibility and leverage with other W3C specifications.
Here are some of the features in SVG that promote small file sizes:
Additionally, HTTP/1.1 allows for compressed data to be passed from server to client, which can result in significant file size reduction. Here are some sample compression results using gzip compression on SVG documents [RFC1952]:
| Uncompressed SVG | With gzip compression | Compression ratio |
|---|---|---|
| 12,912 | 2,463 | 81% |
| 12,164 | 2,553 | 79% |
| 11,613 | 2,617 | 77% |
| 18,689 | 4,077 | 78% |
| 13,024 | 2,041 | 84% |
A related issue is progressive rendering. Some SVG viewers will support:
Here are techniques for minimizing SVG file sizes and minimizing the time before the user is able to start interacting with the фрагменту документу SVGs:
This appendix is informative, not normative.
following are the elements in the SVG language:
This appendix is informative, not normative.
following table lists all of the attributes defined in the SVG language, except for the елементи презентації, which are treated in the Presentation attributes section below. For each attribute, the elements on which the attribute may be specified is also given.
As described in the Styling chapter, for each property there exists a corresponding presentation attribute. table below lists the елементи презентації and the elements on which they may be specified.
This appendix is informative, not normative.
| Name | Values | Initial value | Applies to | Inh. | Percentages | Media | Anim. |
|---|---|---|---|---|---|---|---|
| ‘alignment-baseline’ | auto | baseline | before-edge | text-before-edge | middle | central | after-edge | text-after-edge | ideographic | alphabetic | hanging | mathematical | inherit | see property description | ‘tspan’, ‘tref’, ‘altGlyph’, ‘textPath’ elements | no | N/A | visual | yes |
| ‘baseline-shift’ | baseline | sub | super | <percentage> | <length> | inherit | baseline | ‘tspan’, ‘tref’, ‘altGlyph’, ‘textPath’ elements | no | refer to the "line height" of the ‘text’ element, which in the case of SVG is defined to be equal to the font size | visual | yes |
| ‘clip’ | <shape> | auto | inherit | auto | elements which establish a new viewport, ‘pattern’ elements and ‘marker’ elements | no | N/A | visual | yes |
| ‘clip-path’ | <funciri> | none | inherit | none | контейнерний елементи and графічний елементи | no | N/A | visual | yes |
| ‘clip-rule’ | nonzero | evenodd | inherit | nonzero | графічний елементи within a ‘clipPath’ element | yes | N/A | visual | yes |
| ‘color’ | <color> | inherit | depends on користувацький агент | elements to which properties ‘fill’, ‘stroke’, ‘stop-color’, ‘flood-color’, ‘lighting-color’ apply | yes | N/A | visual | yes |
| ‘color-interpolation’ | auto | sRGB | linearRGB | inherit | sRGB | контейнерний елементи, графічний елементи and ‘animateColor’ | yes | N/A | visual | yes |
| ‘color-interpolation-filters’ | auto | sRGB | linearRGB | inherit | linearRGB | filter primitives | yes | N/A | visual | yes |
| ‘color-profile’ | auto | sRGB | <name> | <funciri> | inherit | auto | ‘image’ elements that refer to raster images | yes | N/A | visual | yes |
| ‘color-rendering’ | auto | optimizeSpeed | optimizeQuality | inherit | auto | контейнерний елементи, графічний елементи and ‘animateColor’ | yes | N/A | visual | yes |
| ‘cursor’ | [ [<funciri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit | auto | контейнерний елементи and графічний елементи | yes | N/A | visual, interactive | yes |
| ‘direction’ | ltr | rtl | inherit | ltr | text content elements | yes | N/A | visual | no |
| ‘display’ | inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit | inline | ‘svg’, ‘g’, ‘switch’, ‘a’, ‘foreignObject’, графічний елементи (including the ‘text’ element) and text sub-elements (тобто, ‘tspan’, ‘tref’, ‘altGlyph’, ‘textPath’) | no | N/A | all | yes |
| ‘dominant-baseline’ | auto | use-script | no-change | reset-size | ideographic | alphabetic | hanging | mathematical | central | middle | text-after-edge | text-before-edge | inherit | auto | text content elements | no | N/A | visual | yes |
| ‘enable-background’ | accumulate | new [ <x> <y> <width> <height> ] | inherit | accumulate | контейнерний елементи | no | N/A | visual | no |
| ‘fill’ | <paint> ( Дивіться Specifying paint) | black | shapes and text content elements | yes | N/A | visual | yes |
| ‘fill-opacity’ | <opacity-value> | inherit | 1 | shapes and text content elements | yes | N/A | visual | yes |
| ‘fill-rule’ | nonzero | evenodd | inherit | nonzero | shapes and text content elements | yes | N/A | visual | yes |
| ‘filter’ | <funciri> | none | inherit | none | контейнерний елементи and графічний елементи | no | N/A | visual | yes |
| ‘flood-color’ | currentColor | <color> [<icccolor>] | inherit |
black | ‘feFlood’ elements | no | N/A | visual | yes |
| ‘flood-opacity’ | <opacity-value> | inherit | 1 | ‘feFlood’ elements | no | N/A | visual | yes |
| ‘font’ | [ [ ‘font-style’ || ‘font-variant’ || ‘font-weight’ ]? ‘font-size’ [ / 'line-height' ]? ‘font-family’ ] | caption | icon | menu | message-box | small-caption | status-bar | inherit | see individual properties | text content elements | yes | see individual properties | visual | yes [1] |
| ‘font-family’ | [[ <family-name> | <generic-family> ],]* [ <family-name> | <generic-family>] | inherit | depends on користувацький агент | text content elements | yes | N/A | visual | yes |
| ‘font-size’ | <absolute-size> | <relative-size> | <length> | <percentage> | inherit | medium | text content elements | yes, the computed value is inherited | refer to parent element's font size | visual | yes |
| ‘font-size-adjust’ | <number> | none | inherit | none | text content elements | yes | N/A | visual | yes [1] |
| ‘font-stretch’ | normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit | normal | text content elements | yes | N/A | visual | yes |
| ‘font-style’ | normal | italic | oblique | inherit | normal | text content elements | yes | N/A | visual | yes |
| ‘font-variant’ | normal | small-caps | inherit | normal | text content elements | yes | N/A | visual | yes |
| ‘font-weight’ | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit | normal | text content elements | yes | N/A | visual | yes |
| ‘glyph-orientation-horizontal’ | <angle> | inherit | 0deg | text content elements | yes | N/A | visual | no |
| ‘glyph-orientation-vertical’ | auto | <angle> | inherit | auto | text content elements | yes | N/A | visual | no |
| ‘image-rendering’ | auto | optimizeSpeed | optimizeQuality | inherit | auto | images | yes | N/A | visual | yes |
| ‘kerning’ | auto | <length> | inherit | auto | text content elements | yes | N/A | visual | yes |
| ‘letter-spacing’ | normal | <length> | inherit | normal | text content elements | yes | N/A | visual | yes |
| ‘lighting-color’ | currentColor | <color> [<icccolor>] | inherit |
white | ‘feDiffuseLighting’ and ‘feSpecularLighting’ elements | no | N/A | visual | yes |
| ‘marker’ | see individual properties | see individual properties | ‘path’, ‘line’, ‘polyline’ and ‘polygon’ elements | yes | N/A | visual | yes |
| ‘marker-end’ ‘marker-mid’ ‘marker-start’ |
none | inherit | <funciri> |
none | ‘path’, ‘line’, ‘polyline’ and ‘polygon’ elements | yes | N/A | visual | yes |
| ‘mask’ | <funciri> | none | inherit | none | контейнерний елементи and графічний елементи | no | N/A | visual | yes |
| ‘opacity’ | <opacity-value> | inherit | 1 | контейнерний елементи and графічний елементи | no | N/A | visual | yes |
| ‘overflow’ | visible | hidden | scroll | auto | inherit | see prose | elements which establish a new viewport, ‘pattern’ elements and ‘marker’ elements | no | N/A | visual | yes |
| ‘pointer-events’ | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | none | inherit |
visiblePainted | графічний елементи | yes | N/A | visual | yes |
| ‘shape-rendering’ | auto | optimizeSpeed | crispEdges | geometricPrecision | inherit |
auto | shapes | yes | N/A | visual | yes |
| ‘stop-color’ | currentColor | <color> [<icccolor>] | inherit |
black | ‘stop’ elements | no | N/A | visual | yes |
| ‘stop-opacity’ | <opacity-value> | inherit | 1 | ‘stop’ elements | no | N/A | visual | yes |
| ‘stroke’ | <paint> ( Дивіться Specifying paint) | none | shapes and text content elements | yes | N/A | visual | yes |
| ‘stroke-dasharray’ | none | <dasharray> | inherit | none | shapes and text content elements | yes | N/A | visual | yes [1] |
| ‘stroke-dashoffset’ | <percentage> | <length> | inherit | 0 | shapes and text content elements | yes | see prose | visual | yes |
| ‘stroke-linecap’ | butt | round | square | inherit | butt | shapes and text content elements | yes | N/A | visual | yes |
| ‘stroke-linejoin’ | miter | round | bevel | inherit | miter | shapes and text content elements | yes | N/A | visual | yes |
| ‘stroke-miterlimit’ | <miterlimit> | inherit | 4 | shapes and text content elements | yes | N/A | visual | yes |
| ‘stroke-opacity’ | <opacity-value> | inherit | 1 | shapes and text content elements | yes | N/A | visual | yes |
| ‘stroke-width’ | <percentage> | <length> | inherit | 1 | shapes and text content elements | yes | N/A | visual | yes |
| ‘text-anchor’ | start | middle | end | inherit | start | text content elements | yes | N/A | visual | yes |
| ‘text-decoration’ | none | [ underline || overline || line-through || blink ] | inherit | none | text content elements | no (дивіться prose) | N/A | visual | yes |
| ‘text-rendering’ | auto | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit |
auto | ‘text’ elements | yes | N/A | visual | yes |
| ‘unicode-bidi’ | normal | embed | bidi-override | inherit | normal | text content elements | no | N/A | visual | no |
| ‘visibility’ | visible | hidden | collapse | inherit | visible | графічний елементи (including the ‘text’ element) and text sub-elements (тобто, ‘tspan’, ‘tref’, ‘altGlyph’, ‘textPath’ and ‘a’) | yes | N/A | visual | yes |
| ‘word-spacing’ | normal | <length> | inherit | normal | text content elements | yes | N/A | visual | yes |
| ‘writing-mode’ | lr-tb | rl-tb | tb-rl | lr | rl | tb | inherit | lr-tb | ‘text’ elements | yes | N/A | visual | no |
This appendix is normative.
following are the feature strings for the ‘requiredFeatures’ attribute. These same feature strings apply to the hasFeature method call that is part of the SVG DOM's support for the DOMImplementation interface defined in DOM Level 2 Core [DOM2] (дивіться Feature strings for the hasFeature method call). In some cases the feature strings map directly to a set of attributes, properties or elements, in others they represent some functionality of the користувацький агент (that it is a dynamic viewer for example). Note that the format and naming for feature strings changed from SVG 1.0 [SVG10] to SVG 1.1. SVG 1.0 feature strings are listed below after the SVG 1.1 feature strings and користувацькі агенти should support all listed feature strings for compatibility reasons. Однак, the SVG 1.0 feature strings can be considered deprecated.
All SVG 1.0 [SVG10] feature strings referring to language capabilities begin with "org.w3c.svg". All SVG 1.0 feature strings referring to SVG DOM capabilities begin with "org.w3c.dom.svg".
For SVG viewers, "org.w3c.svg.static" indicates that the viewer can process and render successfully all of the language features listed above.
This appendix is normative.
This appendix registers a new MIME media type, "image/svg+xml" in conformance with BCP 13 and W3CRegMedia.
image
svg+xml
None.
charset
Same as application/xml media type, as specified in [RFC3023] or its successors.
Same as for application/xml. Дивіться [RFC3023], section 3.2 or its successors.
As with other XML types and as noted in [RFC3023] section 10, repeated expansion of maliciously constructed XML entities can бути використано to consume large amounts of memory, which may cause XML processors in constrained environments to fail.
Several SVG elements may cause arbitrary URIs to be referenced. In this case, the security issues of [RFC3986], section 7, should be considered.
In common with HTML, SVG documents may reference external media such as images, audio, video, style sheets, and scripting languages. Scripting languages are executable content. In this case, the security considerations in the Media Type registrations for those formats shall apply.
In addition, because of the extensibility features for SVG and of XML in general, it is possible that "image/svg+xml" may describe content that has security implications beyond those described here. Однак, if the processor follows only the normative semantics of the published specification, this content will be outside the SVG namespace and shall be ignored. Only in the case where the processor recognizes and processes the additional content, or where further processing of that content is dispatched to other processors, would security issues potentially arise. And in that case, they would fall outside the domain of this registration document.
published specification описує processing semantics that dictate behavior that must be followed when dealing with, among other things, unrecognized elements and attributes, both in the SVG namespace and in other namespaces.
Because SVG is extensible, conformant "image/svg+xml" processors must expect that content received is well-formed XML, but it cannot be guaranteed that the content is valid to a particular DTD or Schema or that the processor will recognize all елементуs and attributes in the document.
SVG has a published Test Suite and associated implementation report showing which implementations passed which tests at the time of the report. This information is periodically updated as new tests are added or as implementations improve.
This media type registration is extracted from Appendix P of the SVG 1.1 specification.
SVG is used by Web browsers, often in conjunction with HTML; by mobile phones and digital cameras, as a format for interchange of graphical assets in desk top publishing, for industrial process visualization, display signage, and many other applications which require scalable static or interactive graphical capability.
Note that the extension 'svgz' is used as an alias for 'svg.gz' [RFC1952], i.e. octet streams of type image/svg+xml, subsequently compressed with gzip.
Note that the Macintosh file type code 'svgz' (all lowercase) is used as an alias for GZIP [RFC1952] compressed "svg ", i.e. octet streams of type image/svg+xml, subsequently compressed with gzip.
Chris Lilley, Doug Schepers (member-svg-media-type@w3.org).
COMMON
None
SVG specification is a work product of the World Wide Web Consortium's SVG Working Group.
W3C has change control over this specification.
This appendix is informative, not normative.
only changes made to the document since the SVG 1.1 Second Edition Proposed Recommendation were the following: